Pattern · lists
Empty state
What a page shows when the user has nothing yet: a heading that says so where the list would be, a sentence that says what to do, and the action that does it.
The pattern, live
Aucun audit pour l'instant.
Un audit commence par une page : ajoutez la première depuis l'extension, ou créez-le ici et ajoutez les pages ensuite.
How it works
- The empty state takes the place of the list, with a heading at the level the list's heading would have had, so it is in the outline where the list belongs.
- The title says what there is none of, as a sentence; the text says what to do next, in the user's terms.
- The action is the same button the toolbar would offer, primary, with its verb.
- When the action succeeds, the list replaces the empty state and the outcome is announced.
Rules a page that copies it keeps
- No empty state while the list is loading; that is BusyRegion.
- No illustration that carries the message; a drawing may sit above the title, hidden.
- A search that finds nothing is the same pattern, with the way out in the text and no action.