Botões

Uma ação primária por tela. Demais ações: secondary, outline ou ghost.

Variantes

default (primary)

variant="default"

secondary

variant="secondary"

outline

variant="outline"

ghost

variant="ghost"

destructive

variant="destructive"

link

variant="link"

Tamanhos

size="icon" | "icon-sm" | "icon-xs"

Com Ícones

Estados

Loading

disabled + Loader2 animate-spin

Disabled

disabled

Regras de Uso

Uma ação default por tela — a ação principal do contexto
Dialog de confirmação obrigatório antes de destructive
Botão disabled + spinner durante operação async
Dois botões default lado a lado
Ação destrutiva sem confirmação