IconButton

Square, icon-only button with a required accessible label

Category: inputs · WCAG 2.2-AA · action, icon, compact, toolbar

Variants

Prop	Type	Default	Description
`label`	`string`	—	Accessible name for the icon-only button. Not rendered — screen readers only; `ariaLabel` is the same thing under the catalog name.
`ariaLabel`	`string`	—	Alias for `label` (the catalog convention for an invisible accessible name). Both work; pass exactly one.
`icon`	`React.ReactNode`	—	Icon element rendered in the component.
`variant`	`'ghost' \| 'outline' \| 'filled'`	`ghost`	`ghost` is transparent until hover, `outline` adds a border, `filled` gives the button a solid surface.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Visual size of the component (e.g. 'sm', 'md', 'lg').
`asChild`	`boolean`	`false`	When true, renders the child element as the root via Slot, merging props (polymorphic rendering).
`disabled`	`boolean`	`false`	When true, disables the control and removes it from the tab order.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	—	Called when the element is clicked.

A compact, recognizable action where an icon alone communicates intent (close, edit, more)
Dense toolbars or table rows where a text label would not fit

The action is not universally recognizable by its icon — use a Button with a text label
Navigating between pages — use an anchor (optionally via asChild)

<IconButton label="Settings"><GearIcon /></IconButton>

<IconButton label="Add" variant="filled" icon={<PlusIcon />} />

<IconButton label="Home" asChild><a href="/"><HomeIcon /></a></IconButton>