Icon button

Usage

Use an icon button when an action is common enough that its icon speaks for itself, like closing, playing, or confirming. It works well in tight spaces such as toolbars, banners, or navigational areas where a full text button would be too heavy.

Types

Default

A neutral glass button for common, low-emphasis actions.

Accent

Use for the main action when you want users to notice it.

Prominent

Inverse-styled action for strong emphasis.

Dismiss

Holds the close icon and is styled for dismissing or cancelling.

Utility

Uses clear glass and holds control icons, such as play or pause, that sit over media-rich content.

Related components

Changelog