IconButton

Compact icon-only button. Pairs well with toolbars, headers, and table row actions.

Examples

Variants

<IconButton icon={Bell} aria-label="Notifications" />
<IconButton icon={Search} variant="outline" aria-label="Search" />
<IconButton icon={Settings} variant="ghost" aria-label="Settings" />
<IconButton icon={Heart} variant="primary" aria-label="Like" />

Destructive

Use className with text-destructive for delete actions.

<IconButton
  icon={Trash2}
  variant="ghost"
  aria-label="Delete"
  className="text-destructive"
/>

Circular

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

API Reference

Props of the IconButton component.

Prop	Type	Default	Description
`icon*`	`LucideIcon`	—	Lucide component to render.
`variant`	`'primary' \| 'soft' \| 'ghost' \| 'outline'`	`'soft'`	—
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	—
`active`	`boolean`	`false`	—
`loading`	`boolean`	`false`	—
`iconSize`	`number`	—	Override default icon size for the size prop.
`roundedFull`	`boolean`	`false`	Render as a circle (default is rounded square).
`aria-label*`	`string`	—	Required for a11y.