Links

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