Icon Button

IconButton triggers a familiar compact action, such as closing a panel, deleting a row, or adding an item. Give every icon button an accessible name because it has no visible label.

Size

medium is the default. Use small for compact toolbars and dense row actions. Keep controls in a group at the same size.

Tone

neutral is the default tone for ordinary actions. Set tone="critical" for destructive actions.

Prominence

standard is the default. Choose low for quiet secondary actions and high for the primary action in a group. For ordinary actions, high prominence uses the theme’s primary accent treatment.

Presentation reference

Custom icons

Pass a decorative, non-interactive ReactElement to icon for a graphic outside the generated icon set, such as a brand mark. IconButton sizes the graphic to match its built-in icons.

Pending and Actions

IconButton uses the same pending and Action behaviour as Button. See Button’s Pending and Actions guidance.

Disabled

Set isDisabled when the action is unavailable. Disabled controls cannot receive focus or respond to presses.

Accessibility

Provide aria-label or aria-labelledby for every icon button. Name the action, not the icon. The icon itself, whether a built-in Icon or a custom graphic, contributes no accessible name, so the naming prop is required. Use a labelled Button when the icon is unfamiliar or visible text would make the action clearer.

API