Toggle

A button that stays pressed. Toggle is the standalone on/off control, ToggleGroup is a segmented set of them, single-select or multi-select.

import from ~/components/ui/toggle and ~/components/ui/toggle-group

Single toggle

Toggle

On or off, on its own. With an icon, with text, or both. defaultPressed starts it on.

Variants and sizes

variant / size

Two variants, default and outline, and three sizes. Pick one pair per surface and hold it. Nothing else is on the menu.

Controlled

Showing endeavors grouped by client.

pressed / onPressedChange

Take control when the rest of the view has to react to the state. Radix writes aria-pressed either way.

Toggle group

ToggleGroup type=single

One mode out of several, like which way a position moved. It behaves like a radio group: arrow keys move between items and exactly one stays pressed.

ToggleGroup type=multiple

Independent flags, like which health states to show. Any number can be pressed at once. The group passes variant and size down, so items never set their own.

Rules

Do

Give every toggle an accessible name: text, or aria-label when it is icon-only.
Let Radix own the pressed semantics. It writes aria-pressed, so never hand-roll it.
Use type=single for one mode out of several, type=multiple for independent flags.
Set variant and size on the ToggleGroup. It hands them to every item through context.

Don't

Do not use a toggle to submit or to fire an action. A toggle holds state, a button does work.
Do not reach for a toggle where a Switch (a setting) or a Checkbox (a form value) reads clearer.
Do not signal the pressed state with color alone. The label or the icon should shift too.
Do not restyle the pressed look with bg or text color classes. Both variants already carry it.