Button

Botões expressam que alguma atividade vai acontecer quando clicados. São usados para executar uma ação e alguns exemplos incluem as ações de Adicionar, Salvar e Deletar.

Boas práticas

Não use botões como elementos de navegação. Considere utilizar Links, porque levam o usuário a uma nova página que não está associada com a ação.
A label do botão indica ao usuário o que irá acontecer no clique. Use somente verbos que descrevem a ação, como Adicionar ou Deletar. Utilize o método de capitalização de sentenças (somente a primeira letra maiúscula e nomes próprios) e limite a sentença em até 3 palavras sempre que possível.
Em conjuntos de botões, utilize labels específicas como Salvar e Excluir, ao invés de labels genéricas como Ok. Essa prática é útil principalmente quando o usuário está confirmação uma ação.

Tipos de botões

Default	Utilizado para a ação principal da página.
Ghost button	Utilizado para ações que não necessitam de atenção primária na página.
Botões com ícone	Ícones podem ser usados dentro dos botões para comunicar melhor a ação. Os ícones devem estar sempre alinhados verticalmente com o texto.
Somente ícone	Geralmente são associados à um menu dropdown ou ações rápidas.
Desabilitado	Utilizado quando o usuário não pode prosseguir até que uma condição seja satisfeita.
Perigo	Utilizado quando uma ação tem efeito destrutivo nos dados do usuário (deletar, remover, etc).
Conjunto de botões	Utilizado quando uma ação possui mais de uma opção. Sempre utilize um botão de uma ação positiva (primário) em conjunto com uma ação negativa ou neutra (secundário). Ações negativas devem ser posicionadas à esquerda. Ações positivas, à direita.

Tamanho de botões

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

Tipos/temas de botões

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

Botões com ícones

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

Indicador de carregando

O indicador de carregando pode ser ativado/desativado manualmente com o suporte loading ou automaticamente retornando uma promessa ao suporte onClick.

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