IconButton

Actions · src/components/IconButton/IconButton.tsx

A button whose whole label is an icon: close, more, copy, expand.

label is not optional and is not decoration. It becomes both aria-label and title, so the control has a name for a screen reader and a tooltip for a sighted user who cannot read the glyph. An icon button with no name is a button nobody can describe.

Defaults to ghost, because these sit in dense rows where four framed buttons read as a wall.

Import

import { IconButton } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
label required	string	What the button does, in words. Required: an icon is not an accessible name.
variant	'primary' | 'secondary' | 'ghost' | 'danger'
size	'sm' | 'md' | 'lg'
round	boolean	Circular rather than rounded-square. For avatars and floating controls.
children	React.ReactNode	The glyph. One icon, nothing else.

Also accepts everything on React.ButtonHTMLAttributes<HTMLButtonElement>.