IconButton

A compact, square button for a single icon. Built on Base UI’s Button primitive and sharing the same variant and color system as Button.

Import


import { IconButton } from 'chunks-ui'

Basic Usage

Icon-only buttons have no visible text, so an aria-label is required for accessibility.


<IconButton aria-label="Add item">
  <PlusIcon />
</IconButton>

Variants

The variant prop controls the visual style. Default: text.


<IconButton variant="contained" aria-label="Add"><PlusIcon /></IconButton>
<IconButton variant="outlined" aria-label="Add"><PlusIcon /></IconButton>
<IconButton variant="text" aria-label="Add"><PlusIcon /></IconButton>

Colors

The color prop sets the semantic color. Default: secondary — the familiar muted “toolbar icon” look.


<IconButton variant="contained" color="primary" aria-label="Search"><SearchIcon /></IconButton>
<IconButton variant="contained" color="destructive" aria-label="Delete"><TrashIcon /></IconButton>
<IconButton variant="contained" color="success" aria-label="Confirm"><CheckIcon /></IconButton>
<IconButton variant="contained" color="warning" aria-label="Settings"><SettingsIcon /></IconButton>
<IconButton variant="contained" color="secondary" aria-label="Add"><PlusIcon /></IconButton>

Colors work with all variants:


<IconButton variant="outlined" color="destructive" aria-label="Delete"><TrashIcon /></IconButton>
<IconButton variant="text" color="success" aria-label="Confirm"><CheckIcon /></IconButton>

Accessibility

Because the button has no visible text, you must provide an aria-label describing the action. Screen readers will announce this label; without it the button is anonymous.


<IconButton aria-label="Delete item">
  <TrashIcon />
</IconButton>

Touch Target

The button is 32px square. To make it easier to tap, add touch-target: the hit area grows to 44×44px, and the button’s size and the layout stay the same. With pointer-coarse: (Tailwind 4.1 or later), it grows only on touch screens:


<IconButton aria-label="Close" className="pointer-coarse:touch-target">
  <XIcon />
</IconButton>

Props

Prop	Type	Default	Description
`variant`	`"contained" \| "outlined" \| "text"`	`"text"`	Visual style.
`color`	`"primary" \| "secondary" \| "success" \| "warning" \| "destructive"`	`"secondary"`	Semantic color.

All other props are forwarded to the underlying Base UI Button.