18 · The interface blocks, live
Components
Buttons, fields, selection, notices and dialogs. All are real: you can focus them with the keyboard, type and check each state.
Only one primary button per view. “Cancel the appointment” carries an icon and a word and sits visually apart from the primary.
Button states
| State | Button | Change |
|---|---|---|
| Rest | Solar with Crystal text; on light, a Deep Amber border | |
| Hover | Glow #ffd23f; the text does not move | |
| Focus | 3 px ring with a 2 px offset, always visible | |
| Pressed | Moves down 1 px and darkens by 6% | |
| Loading | The label changes to the -ing form; the button keeps its width | |
| Disabled | Gray with a border; the nearby text explains why |
As you want to see it in the schedule.
With area code, 11 digits. Type a few digits to see the validation.
The ID number is missing digits. Check that it is complete.
The label always sits above and visible; the placeholder does not replace the label. The error carries an icon, text and a thicker border (2 px) in addition to color. The sample phone number is fictional.
Each option is at least 44 px tall. The switch says “On” or “Off” in words: it does not depend on its color or position.
Notices do not disappear on their own if they contain an action or an error. Confirmation notices can close after 6 seconds, and can be paused. More rules in Clinical states and semantics.
Cancel the Tuesday appointment at 9:00 a.m.?
Example Patient A will get a notice if you send it. The time slot will be freed.
The dialog repeats the action in its buttons (“Yes, cancel it”) instead of “OK”. The safe option is first in the tab order. Only what cannot be undone is confirmed.
Do
- Labels above, visible, with the exact verb or noun
- Buttons with a verb: “Save appointment”, “Change the time”
- Errors next to the field, with an icon and text
- A visible 3 px focus ring on everything that can be used
Don't
- Placeholders as the only label
- “OK” buttons that do not say what is being accepted
- Removing the focus outline for aesthetics
- Disabling a button without explaining why