Button
Buttons can be clicked on by the user to trigger actions.
Props:
Properties | Descriptions | Required | Default |
---|---|---|---|
|
|
| |
| If true, the component is no longer interactive and is greyed out. |
| |
| Text displayed in the component. | ||
| Callback function that executes when the component is clicked | ||
|
|
| |
| 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,
},
],
},
],
});
}
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 updated