Docs/Button

Button

Buttons with Storm's border-driven identity. 5 variants, 3 sizes.

Usage

tsx

1import { Button } from '@storm-ds/ui'
2
3<Button>Click me</Button>

Variants

tsx

1<Button variant="default">Default</Button>
2<Button variant="secondary">Secondary</Button>
3<Button variant="outline">Outline</Button>
4<Button variant="ghost">Ghost</Button>
5<Button variant="destructive">Destructive</Button>

Sizes

tsx

1<Button size="sm">Small</Button>
2<Button size="md">Medium</Button>
3<Button size="lg">Large</Button>

With Icon

tsx

1import { ArrowRight } from '@storm-ds/icons'
2
3<Button>
4  Continue <ArrowRight className="w-4 h-4 ml-2 inline" />
5</Button>

Disabled

tsx

1<Button disabled>Disabled</Button>
2<Button variant="outline" disabled>Disabled Outline</Button>

Loading

tsx

1<Button loading>Saving...</Button>
2<Button loading variant="outline">Loading</Button>

Icon Only

tsx

1import { Search } from '@storm-ds/icons'
2
3<Button iconOnly size="sm" variant="outline" aria-label="Search">
4  <Search className="w-4 h-4" />
5</Button>
6<Button iconOnly size="md" variant="outline" aria-label="Search">
7  <Search className="w-5 h-5" />
8</Button>
9<Button iconOnly size="lg" variant="outline" aria-label="Search">
10  <Search className="w-6 h-6" />
11</Button>

Full Width

tsx

1<Button className="w-full">Full Width Button</Button>

Props

Prop	Type	Default	Description
variant	'default' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'	'default'	Visual style
size	'sm' \| 'md' \| 'lg'	'md'	Button size
className	string	-	Custom classes (overrides via tailwind-merge)
disabled	boolean	false	Disables the button
loading	boolean	false	Shows spinner and disables
iconOnly	boolean	false	Square padding for icon buttons

Use with AI

Create a Next.js component using Storm UI's Button. Import: `import { Button } from '@storm-ds/ui'`. Available variants: default (electric violet), secondary (light violet), outline (bordered), ghost (transparent), destructive (red). Sizes: sm, md, lg. Use `loading` prop to show a spinner and disable the button during async actions. Use `iconOnly` for square icon-only buttons. Supports className overrides via tailwind-merge. Server component compatible. Example: `<Button variant="outline" size="lg">Click me</Button>`, `<Button loading>Saving...</Button>`, `<Button iconOnly><SearchIcon /></Button>`

Blocks

Input