Documentação

Buttons

Botões transmitem ações. Use Primary para a ação mais importante por tela.

Princípios de uso

Apenas UM botão primary por tela. É a ação mais importante.
Secondary acompanha um primary (ex: "Salvar" + "Cancelar").
Tertiary para ações de baixa importância (links, "ver mais", "voltar").
Danger para ações destrutivas, sempre acompanhado de uma forma de cancelar.
Brand é exclusivo de telas de autenticação (login, cadastro, recuperar senha).

<Button variant="primary">Primary</Button>

<Button variant="secondary">Secondary</Button>

<Button variant="tertiary">Tertiary</Button>

<Button variant="danger">Danger</Button>

<Button variant="brand">Brand</Button>

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

<Button>Default</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>

<Button leftIcon={<Plus size={16} />}>Adicionar</Button>
<Button rightIcon={<ArrowRight size={16} />}>Próximo</Button>

<Button variant="tertiary" iconOnly aria-label="Configurações">
  <Settings size={16} />
</Button>

<Button variant="primary" fullWidth>Confirmar</Button>

Prop	Tipo	Default	Descrição
variant	"primary" \| "secondary" \| "tertiary" \| "danger" \| "brand"	"primary"	Variante visual do botão
size	"sm" \| "md" \| "lg"	"md"	Tamanho do botão
loading	boolean	false	Mostra spinner e desabilita o botão
leftIcon	ReactNode	—	Ícone exibido à esquerda do texto
rightIcon	ReactNode	—	Ícone exibido à direita do texto
iconOnly	boolean	false	Botão quadrado apenas com ícone
fullWidth	boolean	false	Ocupa toda a largura disponível
disabled	boolean	false	Desabilita o botão
asChild	boolean	false	Renderiza como Slot (Radix)