Design system Status and feedback
State toggle
A compact state the agent can flip in place: a real button with aria-pressed. Read-only lifecycle states stay badges.
.mk-state-toggle
Overview
The state toggle is the compact state the agent can flip in place — the
human-checked claim. It is explicitly a real button with
aria-pressed: what separates it from every look-alike is that
pressing it is legitimate. Read-only lifecycle states stay badges. Press it.
Usage
- Change one explicit state in placeUse a state toggle when pressing the labelled control immediately flips a durable yes-or-no fact owned by the current item.
- Use Label for read-only stateOnly use this component when the user is permitted to change the fact. A state shown for reference belongs to Label.
- Expose the pressed state semantically
aria-pressedis the source of truth and the visual face follows it; the text continues to name the fact rather than the next action.
Anatomy
1
- 1The face. A 26px pill on the state's tint with its
tinted border — compact enough to ride a service row. The invisible expander
carries the target to 44px.
aria-pressedis the state; the tone class only dresses it.
Variants and states
| State | Specimen | What changes |
|---|---|---|
| Rest | The unresolved state uses warning tone while remaining clearly pressable. | |
| Pressed | aria-pressed and the resolved tone move together. | |
| Hover | The complete pill deepens slightly without moving or changing state. | |
| Keyboard focus | The standard camel outline marks the full 44px target. |
Do and don't
Do
A state a human flips after doing the checking — the press is the attestation.
Confirmed
Don't
A lifecycle status label wired to a click. The pipeline state is the system's to move; dressing it pressable invites the agent to lie to it.
Copy
- The two sides name statesEach side is a state word, not a verb — the press flips between facts.
- An attestation names its actor elsewhereThe claim beside the row records who flipped and when; the toggle only shows which side.
Accessibility
- A toggle button
buttonwitharia-pressed— the state is in the tree. - Tone plus wordingThe side is said by the word; the tint follows.
- Compact face, full target26px visible, 44px through the expander, everywhere.
When to reach for something else
- Nobody flips it by handUse Label.
- An immediate settingUse Toggle, switch variant — a setting belongs to the workspace, a state belongs to an object.
Markup
<button class="mk-state-toggle is-warning" type="button" aria-pressed="false"> Needs check </button> <!-- flipped: --> <button class="mk-state-toggle is-success" type="button" aria-pressed="true"> Confirmed </button>