Button

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

Props:

Properties	Descriptions	Required	Default
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.

A whisper with columns of buttons (Type: Primary, Secondary, Text) alternating by enabled/disabled and Large/Small.

Javascript

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,
          },
        ],
      },
    ],
  });
}

React

import { ReactWhisper } from '@oliveai/ldk';
import * as React from 'react';
import { ButtonStyle, ButtonSize, Direction, JustifyContent } from '@oliveai/ldk/dist/whisper';


const ButtonTest: React.FunctionComponent<Object> = (props) => {
  return (
    <oh-whisper label="Buttons" onClose={() => {}}>
    <oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
      <oh-button
        buttonStyle={ButtonStyle.Primary}
        disabled={false}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Large}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Secondary}
        disabled={false}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Large}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Text}
        disabled={false}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Large}
        tooltip="toolTip"
      />
    </oh-box>
    <oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
      <oh-button
        buttonStyle={ButtonStyle.Primary}
        disabled={true}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Large}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Secondary}
        disabled={true}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Large}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Text}
        disabled={true}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Large}
        tooltip="toolTip"
      />
    </oh-box>

    <oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
      <oh-button
        buttonStyle={ButtonStyle.Primary}
        disabled={false}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Small}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Secondary}
        disabled={false}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Small}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Text}
        disabled={false}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Small}
        tooltip="toolTip"
      />
    </oh-box>
    <oh-box direction={Direction.Horizontal} justifyContent={JustifyContent.SpaceBetween}>
      <oh-button
        buttonStyle={ButtonStyle.Primary}
        disabled={true}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Small}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Secondary}
        disabled={true}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Small}
        tooltip="toolTip"
      />
      <oh-button
        buttonStyle={ButtonStyle.Text}
        disabled={true}
        label="Label"
        onClick={() => {}}
        size={ButtonSize.Small}
        tooltip="toolTip"
      />
    </oh-box>
  </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<ButtonTest />);