Button
Animated primitive with multiple variants, sizes, and loading states.
Simple Build
Interactive Preview
Initialising Operative...
Architecture
Component Architecture
Button/
Prop Usage
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "ghost" | "destructive" | "default" | Visual style of the button. |
size | "sm" | "md" | "lg" | "icon" | "md" | Controls padding and font size. |
loading | boolean | false | Shows a spinner and disables the button. |
disabled | boolean | false | Prevents interaction and reduces opacity. |
className | string | — | Merge additional Tailwind classes. |
onClick | () => void | — | Click handler. |
childrenrequired | React.ReactNode | — | Button label or icon content. |
Usage
import { Button } from '@/ui';
// Default
<Button>Click me</Button>
// Variants
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Delete</Button>
// Sizes
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
// Loading state
<Button loading>Saving...</Button>