Button
Buttons can be clicked on by the user to trigger actions.
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. | |
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 />);
Last modified 1yr ago