Button
Elemento interativo com 4 variantes e 4 tamanhos. Suporta estados de carregamento e desabilitado.
Demonstração
Variantes
Tamanhos
Estados
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'destructive' | 'primary' | Variante visual do botão. |
size | 'sm' | 'md' | 'lg' | 'icon' | 'md' | Tamanho do botão. |
loading | boolean | false | Exibe um spinner de carregamento e desabilita a interação. |
disabled | boolean | false | Desabilita o botão. |
asChild | boolean | false | Renderiza como seu elemento filho (ex: <a>). Baseado no Radix Slot. |
onClick | (e: React.MouseEvent) => void | — | Manipulador de evento de clique. |
Uso
import { Button } from '@ghiberti85/ui'
// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
// Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
// States
<Button loading>Loading…</Button>
<Button disabled>Disabled</Button>
// As link (asChild)
<Button asChild><a href="/about">About</a></Button>