LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Example

Was this helpful?

  1. Whisper Components

Button

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

PreviousBreadcrumbNextChart

Last updated 3 years ago

Was this helpful?

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.

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 />);
A whisper with columns of buttons (Type: Primary, Secondary, Text) alternating by enabled/disabled and Large/Small.