Main Character

Toggle

A pill that stays down when pressed: one click turns it on, the next turns it off. It carries aria-pressed, and its label never changes with its state; the fill says which state it is in. Entities' filters, ask's smart replies, search's mode, a group's roll up.

Tones and states

solid fills with --toggle-on (--fill-accent in both themes) and drops its label to --text-on-accent when on: a filter that narrows what you see. soft (.chip-toggle.soft) only lifts to a --bg-muted fill in --text-default: a mode switch whose two states are both ordinary, like search's meaning / exact text.

Try it

Entities' filter row, live: click to turn each on and off. Search's mode is the one toggle whose label changes, because its two states are two named modes rather than on and off.

Anatomy

button.chip-toggle[.soft][aria-pressed]   1.8rem pill
  label                                    UI face .78rem

off

A --border-default hairline and a --text-muted label on no fill; hover brings the label to --text-default (soft also fills --bg-raised).

on, solid

--toggle-on fill and rule (--fill-accent in both themes), --text-on-accent label.

on, soft

--bg-muted fill, --border-default rule, --text-default label.

state

aria-pressed="true" (or .on) is the state; the label stays the same either way, search's mode aside.

focus

The button focus ring: 2px --focus-ring, 2px off the edge.

Tokens

Fills --toggle-on, --bg-muted, --bg-raised; labels --text-muted, --text-default, --text-on-accent; rule --border-default; radius --radius-pill. In Figma: one Toggle set, tone × pressed × state, with a label property.