Button

Componente de botão com múltiplas variantes e tamanhos. Construído sobre Radix UI Slot para composição flexível.

import { Button } from "@workspace/ui/components/button";

<Button variant="default">Click me</Button>

Variants

Seis variantes de estilo para diferentes contextos.

Sizes

Quatro tamanhos para diferentes contextos de uso.

Icon

Botões com apenas ícone. Use size='icon' e aria-label para acessibilidade.

Com Ícone

Botões com ícone e texto. Adicione o atributo data-icon para espaçamento correto.

Disabled

Estado desabilitado com opacidade reduzida.

API Reference

Prop	Type	Default	Descrição
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	"default"	Estilo visual do botão
`size`	`"default" \| "sm" \| "lg" \| "icon"`	"default"	Tamanho do botão
`asChild`	`boolean`	false	Renderiza como filho (Slot) ao invés de <button>
`disabled`	`boolean`	false	Desabilita interações

Como usar

{/* Botão padrão */}
<Button>Confirmar Pedido</Button>

{/* Com ícone */}
<Button>
  <HugeiconsIcon icon={Add01Icon} data-icon="inline-start" />
  Novo Pedido
</Button>

{/* Apenas ícone */}
<Button variant="outline" size="icon" aria-label="Buscar">
  <HugeiconsIcon icon={Search01Icon} />
</Button>

{/* Variantes */}
<Button variant="outline">Cancelar</Button>
<Button variant="destructive">Excluir</Button>
<Button variant="ghost">Fechar</Button>