Empty states
What a list, table or page shows when there is nothing in it yet, and how it leads to the next step.
An empty state helps visualize content that isn't there yet. It says what's missing and promotes the user action that fills it.
How to compose an empty state section
- Empty: leverage the existing component and add one action in
EmptyContent. - A Button: guide the user to the next step to fill in the condition.
- A utility icon from Iconography: tied to the action type the user is asked to perform.
Example
No sources yet
Connect a source to start indexing records into this workspace.
No sources match “lab”
Try another search term, or clear the filters to see every source.
No data
Do and Don't
No sources match "intake"
Try another name, or clear the filters.
You haven't searched correctly
No results.
Do
- Align the copy to the wanted outcome.
- Start the action in the button with a verb that names what it fills.
- Render it where the content would be, at the same size, so the filters and the header stay where the user left them.
- Announce an empty result after a search or a filter: put it in a
role="status"region, so a screen reader reads it.
Don't
- Open with "Oops", or write it as an error. This isn't taking the place of an error: it's a next step for the user.
- Blame the user: "You haven't added anything".
- Use a generic button label, such as
OKorGet started, that doesn't say what happens next.