No projects yet
Create your first project to start collecting interface patterns.
Empty State
/ <section> · aria-labelledby /
also called blank state, zero state, first-use state, no-results state
An empty state replaces a content view when there are no items to show, whether on first use, after filtering, or after everything is removed. It explains the situation without blame and offers the most useful next action. It is a designed product state, not merely whitespace or an error message.
Anatomy — every part, named
- 1State illustration
aria-hidden="true"“The quiet picture showing what this empty area is for” is the state illustration.
- 2Recovery action
<button>“The button that gets me out of the blank screen” is the recovery action.
Prompt — paste into your agent
Create an empty state as a labelled <section> with a simple icon, a one-line explanation of why the view is empty, and one primary action that resolves it. For a dynamically produced no-results state, announce the message with role="status" without moving focus.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <section> | |
| ARIA | aria-labelledby | |
| ARIA | role="status" | for a dynamically produced no-results message |