Button
InputWeb + NativeMITSolid, outline, ghost, and destructive variants with icon and loading state support.
bun add @otfdashkit/ui
Preview
ButtonInput
Loading Storybook preview…
Code
@otfdashkit/uiimport { Button } from '@otfdashkit/ui'
export function Example() {
return (
<div className="flex flex-wrap gap-3 items-center">
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="gradient">Gradient</Button>
<Button variant="texture">Texture</Button>
<Button variant="shimmer">Shimmer</Button>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Kit for this component
Everything Bundle$149 · 6 kits + 20 templates
Build the buttons for an app: variants, sizes and states in one set.
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' |