Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Icon button

Icon button

Icon-only actions across four emphasis styles, five sizes, three widths, and two shapes.

Anatomy

  • 1 .icon-button-root Square or circular interactive surface.
  • 2 .icon-button-icon The glyph itself.

Variants

  • Action Runs once, then returns to rest.
  • Toggle Stays selected until pressed again.

Emphasis

  • Standard
  • Outlined
  • Tonal
  • Filled
Icon only

When to use

Use an icon button for a familiar action when a visible text label would not fit; always provide an accessible name.