How to build an accessible IconButton in React

Renders a native <button> with a mandatory aria-label so the icon-only control always exposes an accessible name; focus, role, and Enter/Space activation come from the platform

When to use a IconButton

• 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

When not to use it

• 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)

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: <IconButton label=""><TrashIcon /></IconButton>

Prefer: <IconButton label="Delete item"><TrashIcon /></IconButton>

An icon-only control has no visible text, so the label prop is the only accessible name screen readers can announce

Example

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

See the full IconButton reference →