Design System
Components

Icon Button

A square icon-only control — an accessible label is required, not optional.

Built on Button + Icon; DestructiveIconButton is the same control pre-set to a ghost-that-reddens style with a trash glyph default, for the common "delete this row" case.

Props

Prop

Type

Accessibility

  • label is a required prop, not optional — an icon-only control has no other accessible name, so the type itself won't let you omit it. It also becomes the native title tooltip.

Do / Don't

  • Do write label as the action ("Edit", "View price entries"), not the icon's name ("Pencil icon") — a screen reader announces the label, not what the glyph looks like.
  • Don't conditionally render an IconButton to hide an action the current user can't take — the DS convention for a permission-gated action is to keep the control visible, disabled, with a tooltip stating why; an absent control is indistinguishable from a permissions gap, a rendering bug, or an unshipped feature.

On this page