Patterns
Feedback
How to tell people something — undo instead of confirm, empty versus loading versus failed, where errors go by scope, and how they are worded.
The wider the scope of a message, the further out it goes: an input's error sits under the input, a panel's problem under the panel header, a workspace's problem in the notification center. Which component carries each kind of message is in Choosing a component.
When it applies
Every result, problem, empty view and wait that people need to know about.
Rules
Undo instead of confirm
- Don't ask for confirmation when an action can be undone. Do it, then show a toast with Undo (Toast).
- Guard actions that cannot be undone, such as deleting, with a dialog (AlertDialog). Don't color them in the menu.
Empty, loading and failed
Keep these three apart:
| Situation | Show |
|---|---|
| There is nothing here | An empty state (EmptyState): a gray icon, one sentence, at most one button |
| It is loading | A skeleton with the layout of the content (Skeleton); the other indicators are in Choosing a component |
| It failed to load | An error at its scope (below), which says what happened and offers Retry |
- Don't show an empty state when loading failed. An empty state is a conclusion ("there is nothing here"); a failure is not.
- Make the skeleton the same size as the content it stands for, so nothing flashes or jumps when the content arrives. Don't show one placeholder and then swap it for another.
Errors, by scope
| Scope | Where the error goes |
|---|---|
| One input | Under the input; see Forms |
| A dialog or a form | A banner inside it (Banner) |
| One panel: an agent won't start, a setting didn't save | A full-width banner under the panel header (PanelNotice, Panel) |
| The whole workspace | The notification center (NotificationCenter) |
- Use orange when something goes wrong, not red (Color).
- Say what happened, why, and what to do next, in plain words (Writing).
Progress
- Put progress inside the thing it belongs to, on its own thin track. Don't attach it to the edge of a rounded container; see Shape.