Primitives

Button

Primary action control with 7 variants, 5 sizes, loading state, and icon slots.

Variants

All variants

<Button variant='primary'>Primary</Button>
<Button variant='secondary'>Secondary</Button>
<Button variant='soft'>Soft</Button>
<Button variant='outline'>Outline</Button>
<Button variant='ghost'>Ghost</Button>
<Button variant='destructive'>Destructive</Button>
<Button variant='link'>Link</Button>

Sizes

sm · md · lg · icon

With icons

Leading & trailing icons

import { Plus, Sparkles, Trash2 } from 'lucide-react'

<Button leadingIcon={<Plus />}>New task</Button>
<Button variant='secondary' trailingIcon={<Sparkles />}>AI actions</Button>
<Button variant='destructive' leadingIcon={<Trash2 />}>Delete</Button>

Loading state

loading={true}

<Button loading>Saving...</Button>

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'soft' \| 'outline' \| 'ghost' \| 'destructive' \| 'link'	'primary'	Visual style.
size	'sm' \| 'md' \| 'lg' \| 'icon' \| 'icon-sm'	'md'	Control height + horizontal padding.
loading	boolean	false	Shows a spinner and disables interaction.
leadingIcon	ReactNode	—	Icon slot rendered before children.
trailingIcon	ReactNode	—	Icon slot rendered after children.
asChild	boolean	false	Merge props into the child via Radix Slot — useful for links.

All other standard <button> attributes (onClick, disabled, type, etc.) forward through.