Component
Simple Button
Button component with some styling
Installation
Usage
Default
Default behavior of the button
1<SimpleButton>Launch</SimpleButton>With Icon
Pair button with an icon for contextuality.
1<SimpleButton className="gap-2"><Camera className="size-4" />Capture</SimpleButton>Icon Only
Compact expressive action using the icon size variant.
1<SimpleButton size="icon"><Sparkles className="size-4" /></SimpleButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Any content inside the button such as text, icons, or custom elements. |
| className | string | — | Utility classes for further tweaking spacing, color, or layout. |
| size | 'default' | 'sm' | 'lg' | 'icon' | default | Preset sizing variants that adjust height, padding, and icon spacing. |
| ...props | React.ButtonHTMLAttributes<HTMLButtonElement> | — | Native button props such as type, disabled, onClick, and accessibility hooks. |