Icon Toggle Button

Overview

Use an icon toggle button for a single binary choice expressed with an icon — favoriting an item, pinning, bookmarking. It is the icon-only, square sibling of the Toggle Button: same state-layer and focus model, with a selected state and six styles — filled, tonal, outlined, standard, elevated and glass.

Show the outline form of the icon while unselected and the filled form once selected — pass them as icon and selectedIcon and the component swaps automatically. Because there is no visible label, always pass an aria-label.

Examples

Variants

Each style has a low-emphasis unselected state (top row) and a high-emphasis selected state (bottom row). standard has no container; glass is translucent and is meant to sit over 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.

Radius

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

Installation

API Reference

Accessibility

• Renders a native <button type="button"> with aria-pressed reflecting the selected state.
• Control selected from your own state and flip it on onClick (see the demo above).
• Always provide an aria-label — there is no visible text to name the control.
• Reinforce the state beyond color: pass an outline icon and a filled selectedIcon so the change reads without relying on the fill alone.
• 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.