Button

Buttons can be clicked on by the user to trigger actions.

Props:

PropertiesDescriptionsRequiredDefault

buttonStyle

ButtonStyle.Primary- Purple background with white text. ButtonStyle.Secondary - Purple border with a white background and purple text.

ButtonStyle.Text - No outline, no background, purple text.

ButtonStyle.Primary

disabled

If true, the component is no longer interactive and is greyed out.

false

label

Text displayed in the component.

onClick

Callback function that executes when the component is clicked

size

ButtonSize.Large- Wider and taller. ButtonSize.Small - Thinner and shorter.

ButtonSize.Small

tooltip

Text that appears when hovering over the component.

Example

Buttons are often an extremely important element in a UI. In this example, we'll look at what different button sizes and types create for us in a Whisper.

import { whisper } from '@oliveai/ldk';
import { 
  Direction, 
  JustifyContent, 
  ButtonSize, 
  ButtonStyle, 
} from '@oliveai/ldk/dist/whisper';

export const buttonWhisper = async () => {
  await whisper.create({
    label: 'Buttons',
    onClose: () => {},
    components: [
      {
        type: whisper.WhisperComponentType.Box,
        direction: Direction.Horizontal,
        justifyContent: JustifyContent.SpaceBetween,
        children: [
          {
            type: whisper.WhisperComponentType.Button,
            disabled: false,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Large,
            buttonStyle: ButtonStyle.Primary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: false,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Large,
            buttonStyle: ButtonStyle.Secondary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: false,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Large,
            buttonStyle: ButtonStyle.Text,
          },
        ],
      },
      {
        type: whisper.WhisperComponentType.Box,
        direction: Direction.Horizontal,
        justifyContent: JustifyContent.SpaceBetween,
        children: [
          {
            type: whisper.WhisperComponentType.Button,
            disabled: true,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Large,
            buttonStyle: ButtonStyle.Primary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: true,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Large,
            buttonStyle: ButtonStyle.Secondary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: true,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Large,
            buttonStyle: ButtonStyle.Text,
          },
        ],
      },
      {
        type: whisper.WhisperComponentType.Box,
        direction: Direction.Horizontal,
        justifyContent: JustifyContent.SpaceBetween,
        children: [
          {
            type: whisper.WhisperComponentType.Button,
            disabled: false,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Small,
            buttonStyle: ButtonStyle.Primary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: false,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Small,
            buttonStyle: ButtonStyle.Secondary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: false,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Small,
            buttonStyle: ButtonStyle.Text,
          },
        ],
      },
      {
        type: whisper.WhisperComponentType.Box,
        direction: Direction.Horizontal,
        justifyContent: JustifyContent.SpaceBetween,
        children: [
          {
            type: whisper.WhisperComponentType.Button,
            disabled: true,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Small,
            buttonStyle: ButtonStyle.Primary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: true,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Small,
            buttonStyle: ButtonStyle.Secondary,
          },
          {
            type: whisper.WhisperComponentType.Button,
            disabled: true,
            label: 'Label',
            onClick: () => {},
            size: ButtonSize.Small,
            buttonStyle: ButtonStyle.Text,
          },
        ],
      },
    ],
  });
}

Last updated