Button
InputSolid, outline, ghost, and destructive variants with icon and loading state support.
ButtonInput · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Button from @otfdashkit/ui.
Code
import { Button } from '@otfdashkit/ui'
export function Example() {
return (
<div className="flex gap-3">
<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
</div>
)
}Props
Props declared in the Button source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| asChild | boolean | false | |
| size | 'sm' | 'default' | 'lg' | 'xl' | 'icon' | 'icon-sm' | null | 'default' | |
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link' | 'gradient' | 'texture' | 'shimmer' | null | 'default' |