Foundation

Button

Primary action element. Three variants drive the chrome, two sizes drive the height.

Examples

<Button>Primary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>

<Button size="sm">Small</Button>
<Button>Default</Button>

import Search from '@lucide/svelte/icons/search';

<Button icon aria-label="Search">
  <Search size={14} strokeWidth={1.75} />
</Button>

<Button disabled>Disabled</Button>

Prop	Type	Default	Description
`variant`	`'primary' \| 'ghost' \| 'outline'`	`'primary'`	Visual chrome alternative.
`size`	`'sm' \| 'md'`	`'md'`	Compact (~24px) or default (~30px).
`icon`	`boolean`	`false`	Square hit-target sized for a single SVG glyph; pair with aria-label.
`disabled`	`boolean`	`false`	Native disabled state.
`...rest`	`HTMLButtonAttributes`	`—`	Spread onto the underlying <button>.

CLI

npx @a3tai/mittsu add button