Button

Buttons express what action will occur when the user clicks it. Buttons are used to initialize an action, and some examples include actions like Add, Save, and Delete.

Best practices

Do not use Buttons as navigational elements. Instead, use Links because it takes the user to a new page and is not associated with an action.
Button labels tell users what will happen when they click the button. Use verbs that describe the action, such as Add or Delete. Use sentence-style capitalization (only the first word in a phrase and any proper nouns capitalized) and no more than three words for button labels when possible.
For Sets of Buttons, use specific labels, such as Save or Discard, instead of using OK. This is particularly helpful when the user is confirming an action.

Button types

Default	When an action requires primary dominance on the page.
Ghost button	When an action does not require primary dominance on the page.
Button with icon	When words are not enough, icons can be used in buttons to better communicate what the button does. Icons are always paired with text.
Icon button	Usually used associated with a dropdown menu, settings panel.
Disabled button	Use when the user cannot proceed until an input is collected.
Danger button	When an action has potentially destructive effects on the user's data (delete, remove, etc).
Set of buttons	When an action required by the user has more than one option, always use a negative action button (secondary) paired with a positive action button (primary) in that order. Negative action buttons will be on the left. Positive action buttons should be on the right.

Button sizes

import { Button, HFlow, VFlow } from '@lemonade/ui'
import React from 'react'

function ButtonSizes() {
  return (
    <VFlow>
      <HFlow alignItems='flex-end'>
        <Button kind='primary' size='large'>
          Large
        </Button>
        <Button kind='primary' size='medium'>
          Medium
        </Button>
        <Button kind='primary' size='small'>
          Small
        </Button>
      </HFlow>
      <Button kind='primary' block>
        Block button
      </Button>
    </VFlow>
  )
}

export default ButtonSizes

Button Kinds / Skins

import { Button, HFlow, VFlow } from '@lemonade/ui'
import React from 'react'

function ButtonSkins() {
  return (
    <VFlow>
      <HFlow alignItems='flex-end'>
        <Button kind='normal' skin='default'>
          Normal / Default
        </Button>
        <Button kind='normal' skin='ghost'>
          Normal / Ghost
        </Button>
      </HFlow>
      <HFlow alignItems='flex-end'>
        <Button kind='primary' skin='default'>
          Primary / Default
        </Button>
        <Button kind='primary' skin='outline'>
          Primary / Outline
        </Button>
        <Button kind='primary' skin='ghost'>
          Primary / Ghost
        </Button>
      </HFlow>
      <HFlow alignItems='flex-end'>
        <Button kind='danger' skin='default'>
          Danger / Default
        </Button>
        <Button kind='danger' skin='outline'>
          Danger / Outline
        </Button>
        <Button kind='danger' skin='ghost'>
          Danger / Ghost
        </Button>
      </HFlow>
    </VFlow>
  )
}

export default ButtonSkins

Button with icons

import { Button, HFlow, Icon, Text } from '@lemonade/ui'
import React from 'react'

function ButtonIcons() {
  return (
    <HFlow alignItems='flex-end'>
      <Button kind='primary'>
        <Icon icon='rocket' style={{ marginRight: '0.5rem' }} />
        <Text color='inherit'>Launch</Text>
      </Button>
      <Button>
        <Icon icon='rocket' style={{ marginRight: '0.5rem' }} />
        <Text color='inherit'>Launch</Text>
      </Button>
      <Button skin='ghost' kind='primary'>
        <Icon icon='rocket' style={{ marginRight: '0.5rem' }} />
        <Text color='inherit'>Launch</Text>
      </Button>
    </HFlow>
  )
}

export default ButtonIcons

Loading indicator

The loading indicator can be manually toggled on/off with the loading prop or automatically by returning a promise to the onClick prop.

import { Button, HFlow } from '@lemonade/ui'
import React from 'react'

function ButtonLoading() {
  const handleClick = () => {
    // Simulate a delayed function
    return new Promise(resolve => {
      setTimeout(() => resolve(), 2000)
    })
  }

  return (
    <HFlow alignItems='flex-end'>
      <Button loading>Always loading</Button>
      <Button onClick={handleClick} kind='primary'>
        Click me
      </Button>
    </HFlow>
  )
}

export default ButtonLoading