When to use it

Use Toggle for a single independent state that can be pressed on or off. It works well for filter chips, toolbar controls, view-affecting options, and compact actions like save or favorite.

If the visitor is choosing between coordinated options, use ToggleGroup instead so the selection model stays explicit.

Composition notes

Toggle is a single control, but icon-only usage still needs a clear aria-label. When the root element needs to be something other than a button, asChild lets you keep the recipe while swapping the semantic wrapper.

Prefer putting icons or short text inside the toggle. If the content gets long, another control style is usually easier to scan.

Behavior and theming guidance

Use variant="plain" for low-emphasis toolbars and variant="outlined" when the control needs more visible structure. Match size to the surrounding density instead of mixing many toggle sizes in the same group.

The pressed styling already comes from the shared recipe, so use tokens and variants before rewriting colors or spacing by hand.