Button
Triggers actions or navigation. Supports multiple variants, sizes, a loading state, and icon slots. Built with forwardRef so it works with form libraries and third-party tools.
Preview
Variants
Sizes
States
Usage
jsx
import { Button } from '@/components/ui'
// Primary (default)
<Button>Save changes</Button>
// With variant and size
<Button class="text-sky-300">variant="outline" class="text-sky-300">size="lg">Cancel</Button>
// Loading state
<Button loading>Saving…</Button>
// With icons
<Button class="text-sky-300">leftIcon={<PlusIcon />}>New item</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'primary' | Visual style of the button. |
| size | 'sm' | 'md' | 'lg' | 'md' | Controls padding and font size. |
| loading | boolean | false | Shows a spinner and disables interaction. |
| disabled | boolean | false | Prevents interaction and reduces opacity. |
| leftIcon | ReactNode | — | Element rendered before children. |
| rightIcon | ReactNode | — | Element rendered after children. |
| className | string | '' | Additional Tailwind classes. |