Skip to main content

Button

Apresentação​

O componente Button é responsável por criar elementos interativos para ações do usuário. Ele oferece diferentes estilos visuais e comportamentos que podem ser aplicados aos botões, tornando-os versáteis para diversos contextos de uso.

Quando usar​

  • Para ações principais em formulários
  • Para confirmações de operações
  • Para navegação entre páginas
  • Para abrir modais
  • Para submeter formulários
  • Para ações secundárias
  • Para cancelar operações
  • Para ações de destaque
  • Para ações de perigo
  • Para ações de sucesso

Forma básica de uso​

import { Button } from 'eitri-luminus';

// Botão básico
<Button>Clique aqui</Button>

// Botão com diferentes cores
<Button className="btn-primary">Primário</Button>
<Button className="btn-secondary">Secundário</Button>
<Button className="btn-accent">Destaque</Button>
<Button className="btn-danger">Perigo</Button>
<Button className="btn-warning">Alerta</Button>
<Button className="btn-success">Sucesso</Button>
<Button className="btn-info">Informação</Button>

// Botão com ícone
<Button className="btn-primary">
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clipRule="evenodd" />
  </svg>
  Adicionar
</Button>

// Botão desabilitado
<Button disabled>Desabilitado</Button>

// Botão com evento de clique
<Button onClick={() => console.log('Clicou!')}>
  Clique para ação
</Button>

// Botão que abre um modal
<Button linkToModal="meu-modal">
  Abrir Modal
</Button>

Propriedades​

PropriedadeTipoDescrição
onClickfunctionFunção chamada ao clicar no botão
disabledbooleanDesabilita o botão
linkToModalstringID do modal a ser aberto
classNamestringClasses CSS adicionais
idstringIdentificador único do componente

Heranças​

O componente Button herda todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

  • Propriedades de estilo (margin, padding, etc)
  • Propriedades de layout (flex, grid, etc)
  • Propriedades de posicionamento
  • Propriedades de acessibilidade
  • Propriedades de identificação (id, data-e)

Observações​

  • O componente usa a classe 'btn' para estilização base
  • Por padrão, aplica a classe 'btn-primary' se nenhuma cor for especificada
  • Suporta diferentes variantes de estilo (primary, secondary, accent, etc)
  • É possível personalizar a aparência usando classes do Tailwind
  • O componente é responsivo por padrão
  • Mantém a semântica HTML apropriada
  • Pode conter ícones e conteúdo rico
  • Suporta integração com modais
  • Pode ser desabilitado
  • É especialmente útil para ações do usuário
  • Pode ser combinado com outros componentes
  • Suporta diferentes tamanhos e estilos
  • Mantém o tipo "button" por padrão