Button

Componente interativo para ações. Baseado em Radix UI + CVA.

Variantes

Todas as variantes

<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="destructive">Destructive</Button>

Formato

pill (padrão — barras de ação / CTAs de página) / default (arredondado — em formulários)

Tamanhos

sm (32px) / default (40px) / lg (48px) / icon (40px)

Estados

Normal / Desabilitado / Carregando (default + outline)

Com ícone

Props

Prop	Tipo	Default	Descrição
variant	default \| secondary \| outline \| ghost \| link \| destructive	default	Estilo visual
size	default \| sm \| xs \| lg \| icon \| icon-xs \| icon-sm \| icon-lg	default	Tamanho
asChild	boolean	false	Renderiza como filho (Radix Slot)
disabled	boolean	false	Estado desabilitado
isLoading	boolean	false	Desabilita o botão e sobrepõe um spinner; o tamanho do alvo de clique não muda

Composição completa, exemplos e detalhes no shadcn: shadcn/ui — Button