Skip to content

Button

InputWeb + NativeMIT
View in Storybook

Solid, outline, ghost, and destructive variants with icon and loading state support.

bun add @otfdashkit/ui

Preview

Button
Loading Storybook preview…

Code

import { 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.

See the kit

Props

Props declared in the Button source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
asChildbooleanfalse
size'sm' | 'default' | 'lg' | 'xl' | 'icon' | 'icon-sm' | null'default'
variant'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link' | 'gradient' | 'texture' | 'shimmer' | null'default'