Buttons
Icon button
Use a familiar icon and always provide an accessible name.Anatomy
Callouts are measured from the live icon button below.
- 1
Container
The square target the person hits — the same comfortable min size as any button, with the variant's shape and surface.
- 2
State layer
Hover, focus, and pressed feedback painted on the container; the kit has no separate state-layer element.
- 3
Icon
The single glyph. It is decorative — the accessible name comes from aria-label, not the icon.
- 4
Accessible name
aria-label supplies the name an icon-only control needs; without it the button is unlabelled.
Surface variants
Icon buttons inherit the five button surfaces; emphasis rises from text to filled.
text (default) & outlined
Low emphasis. Use in toolbars, list rows, and dense areas where the icon should stay quiet.
tonal & elevated
Medium emphasis. Give a single icon action more presence without a full fill.
filled
High emphasis. Reserve for the one dominant icon action in a region.
Interactive configuration
Adjust the primary props and choose coherent slot presets.
Props stay atomic
Independent primitive values use individual controls.
Slots use presets
Related slot combinations switch as one preset without invalid states.
States
Each variant resolves the full M3 state scheme from static tokens.
Hover
A subtle state layer confirms the icon is interactive.
Pressed
The active state acknowledges the current activation.
Focus-visible
A visible ring appears for keyboard focus on every surface.
Disabled
Prevents interaction and lowers emphasis while keeping the icon in place.
Loading
loading swaps the icon for a spinner and exposes aria-busy.
In context
The component is shown in a working composition built from public kit primitives.