A toggle button uses pressed and unpressed to show the current setting
Aliases: toggle button · aria-pressed · sticky pressed
What it is
A toggle button does not fire a one-shot action; it flips a setting on or off. Pressed / unpressed displays the current value: Bold is on, the button stays inset or lit; off, it returns to flat. That is not the same as momentary press feedback—momentary press says contact exists; toggle press is the value. People who mix them up click an already-on Bold again, thinking it has not taken.
Why it happens
An action button’s visual press is transient and should die on release, or it looks stuck. A toggle borrows “inset” as a steady state because physical switches and keycaps once used position for value. If transient and steady share the same inset on screen, “I am pressing” and “it is on” cannot be told apart. Steady press has to last longer than transient, and is usually stronger (kept fill, kept selected color); transient is a shorter darkening. Once look and value diverge—the document is bold, the button looks unpressed—the next click is intended as turn-on and is actually turn-off. All of a toggle’s usability sits on look = current setting.
Studying it
Give the same Bold control two encodings: inset only during contact, versus inset that remains after release. Show already-bold text and ask whether to click.
Independent variables: whether rest holds a pressed look, whether transient and steady share a shape, whether the text is actually bold. Dependent variables: false-toggle rate, “I thought it was off,” accuracy inferring the current value from look.
Do not only test “can they turn it on.” The critical trial is value already on, and whether look prevents an extra flip.
Where it stops holding
In a mutually exclusive segmented control, pressed means “this item is current,” not on/off; the look is still steady, just exclusive. A switch uses thumb position for value and is not a toggle button; do not put inset on the track. A one-shot (Save) must never stay pressed, or it will be read as a toggle. On touch the transient is often occluded; steady press has to remain visible after lift.
Applying it
- Make the selected look of a toggle a steady state that survives release, not only a darkening during contact.
- Split styling from action buttons: toggles have a persistent on-fill, actions do not.
- Bind look to the true value; do not light the control locally before the document is written.
- Verify by turning Bold on and moving the pointer away. If the button returns to unselected while type stays bold, or shows on while type is not, pressed is not expressing the current setting.
Related
- Within the group: E1.12.2 Assistive technology must see a toggle as a switch-like state · E1.12.3 Toolbar toggles need a different look from neighboring action buttons · E1.12.4 A toggle’s state must survive a page refresh
- Adjacent: E3.03 Switches · E1.02 Button states · D1.03 Selection and highlight
- Search terms:
toggle button·aria-pressed·pressed state