Icon Button

IconButton saves horizontal space by exposing an action as a single glyph with no visible label. It belongs in toolbars, table rows, and map or media overlays where a labeled button would wrap or crowd the surface. Because glyphs alone rarely carry meaning for novice operators or assistive technology, every IconButton pairs with a descriptive accessible name and a tooltip that surfaces the outcome. Reserve the pattern for universally taught actions (play, mute, expand), repeated row controls (edit, delete on a row), and density-critical contexts where the label is redundant to adjacent text.

ButtonType semantics mirror Button: at most one Primary icon action per region; Destructive for delete or remove; Critical sparingly in high-attention workflows. Default to Secondary inside toolbars—the icons are strong enough signal on their own.

IconButton ships with the standard icon-button corner radius by default across every ButtonType. Pass the boolean pill prop to opt in to a fully rounded (pill / circular) border radius for floating toolbars and FAB-style controls (e.g. the staff panel toggle). Combine with cornerStyle={ComponentCornerStyle.Sharp} to override back to square corners when a brand or layout requires it.

Do

Don't

Focusable, named, and operable by keyboard; tooltips on focus; contrast that holds in both themes. See Accessibility for the full contract.