Icon Button

Overview

Use an icon button for a recognizable action where a text label would be redundant — a search trigger, an overflow menu, a close affordance. It shares the Button's geometry, state-layer model and focus ring, but is square and icon-only, with six styles — filled, tonal, outlined, standard, elevated and glass. standard is the low-emphasis style with no container (just the icon); filled is the default.

Because there is no visible label, always pass an aria-label describing the action.

Examples

Variants

The six styles map to ascending emphasis. standard has no container and reads as a bare icon; glass is translucent and is meant to sit over imagery or a colored backdrop.

Sizes

Five square sizes scale padding and icon together — xs (32px), sm (40px, default), md (56px), lg (96px), xl (136px). xs and sm keep a 44×44 minimum touch target for accessibility even though the button renders smaller.

Radius

Four shapes via the shape prop: full (circle, default), rounded (12px), squared whose corner radius grows with the size for a harmonious look, and none.

Disabled

Installation

API Reference

Accessibility

• Renders a native <button>, so keyboard activation and focus handling come for free.
• Always provide an aria-label — there is no visible text to name the control.
• xs and sm keep a 44×44 minimum touch target via an invisible hit area.
• A visible focus ring (3px accent with a 2px offset) is provided via focus-visible.
• loading sets aria-busy and disables interaction while work is in flight.
• Shares the Button's shape (full/rounded/squared/none) prop.