Button
Interactive element with 4 variants and 4 sizes. Supports loading and disabled states.
Live Demo
Variants
Sizes
States
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'ghost' | 'destructive' | 'primary' | Visual style variant. |
size | 'sm' | 'md' | 'lg' | 'icon' | 'md' | Size of the button. |
loading | boolean | false | Shows a loading spinner and disables interaction. |
disabled | boolean | false | Disables the button. |
asChild | boolean | false | Renders as its child element (e.g. <a>). Powered by Radix Slot. |
onClick | (e: React.MouseEvent) => void | — | Click event handler. |
Usage
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>