Button
Base
Variações
Com ícone no início
Somente ícone
Use o componente IconButton para botões com apenas ícone.
ToggleButton
Use o componente ToggleButton para essa aplicação.
Você pode controlar o estado dos botões agrupados.
Opções
Quando um botão tiver mais de uma opção é possível usar esse estilo abaixo. Lembrando que ao utilizar essa variação também será necessário aplicar o componente de DropdownMenu.
Tamanhos
Pequeno
Médio (padrão)
Estados
Desabilitado
É possível desabilitar um botão quando for necessário. Por exemplo, quando uma ação só pode ser realizada após o preenchimento de todas as informações.
Carregando
Caso a ação do botão leve algum tempo, é possível adicionar o estilo de carregamento.
IA
Use a prop ia para identificar ações diretamente relacionadas a recursos de Inteligência Artificial. O valor padrão é false.
Carregando
Caso a ação de IA leve algum tempo, é possível adicionar o estilo de carregamento.
Somente ícone
Use o componente IconButton com a prop ia para ações de IA representadas apenas pelo ícone. Informe um rótulo acessível via aria-label.
Agrupando botões
O agrupamento padrão pode ser usado quando for necessário exibir botões lado a lado.
Feedback
To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.