Atom

IconButton

Icon-only button for compact actions. Requires aria-label for accessibility.

Overview

The IconButton component is a compact button displaying only an icon. It's ideal for toolbars, headers, and dense UIs. An aria-label is required for screen reader accessibility.

Props

Prop	Type	Default	Description
`icon`	`ReactNode`	-	Required. Icon element to display
`aria-label`	`string`	-	Required. Accessible label for screen readers
`size`	`ResponsiveValue<'sm' \| 'md' \| 'lg'>`	`'md'`	Button size - can be responsive
`variant`	`'solid' \| 'soft' \| 'ghost' \| 'outline'`	`'ghost'`	Visual style variant
`color`	`'base' \| 'primary' \| 'primary-alt' \| 'success' \| 'warning' \| 'danger'`	`'base'`	Color variant
`radius`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Border radius
`disabled`	`boolean`	`false`	Disables the button
`loading`	`boolean`	`false`	Shows loading spinner

Variants

Visual Variants

Four styles for different emphasis levels.

<IconButton icon={<Bell />} variant="solid" aria-label="Notifications" />
<IconButton icon={<Bell />} variant="soft" aria-label="Notifications" />
<IconButton icon={<Bell />} variant="ghost" aria-label="Notifications" />
<IconButton icon={<Bell />} variant="outline" aria-label="Notifications" />

Colors

Semantic colors for different actions.

Sizes

Three size options for different contexts.

<IconButton icon={<Bell />} size="sm" aria-label="Notifications" />  {/* 28px */}
<IconButton icon={<Bell />} size="md" aria-label="Notifications" />  {/* 36px */}
<IconButton icon={<Bell />} size="lg" aria-label="Notifications" />  {/* 44px */}

Radius

Control border radius, including circular buttons.

Examples

Header Actions (from your app)

Common pattern in the application header.

<IconButton icon={<Bell />} aria-label="Notifications" />
<IconButton icon={<LogOut />} aria-label="Logout" />

Navigation Buttons

For pagination or carousel navigation.

Destructive Action

Use danger color for delete actions.

<IconButton icon={<Trash2 />} color="danger" aria-label="Delete item" />

Circular Buttons

Use radius="full" for circular buttons.

States

<IconButton icon={<Bell />} aria-label="Notifications" />
<IconButton icon={<Bell />} disabled aria-label="Notifications" />
<IconButton icon={<Bell />} loading aria-label="Loading" />