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 propriedade ia para identificar ações diretamente relacionadas a recursos de Inteligência Artificial.
Botões de IA estão disponíveis apenas para os tipos (kind) primário e secundário.
Os botões de IA já adicionam por padrão o ícone adequado, ao utilizar o componente IconButton não é necessário adicionar o ícone, passe como children o texto que identifica a ação.
Agrupando botões
O agrupamento padrão pode ser usado quando for necessário exibir botões lado a lado.
Feedback
Para reportar algum problema, solicitar novos ícones, solicitar novos casos de uso de componentes, tirar dúvidas, enviar sugestões ou reportar bugs, entre em contato pelo nosso canal no Slack #tangram-design-system.