On this page
Overview
Show code, FirstUse.tsx
Variants
No results
The search and the filters stay, and Clear filters resets them, as in filtering.
Show code, NoResults.tsx
Load failed
A failure is a danger Alert, announced as it appears, in the room the table takes. It says the documents are safe.
Show code, LoadFailed.tsx
No access
The state says who to ask, and Request access sends the request.
Show code, NoAccess.tsx
All done
When the last review is approved, the queue says so, and what comes next.
Show code, AllDone.tsx
A whole page
When the whole page can't show, the frame stays and the page says so, with the way on.
- Its address leads nowhere: Go to Home.
- The person may not see it: Request access.
- The device is offline: Try again.
Show code, WholePage.tsx
Anatomy
The frame that stays
Icon
Heading
Description
Action
Show code, EmptyStatesAnatomy.tsx
Behaviour
In place of the content
The state takes the place of the list or the table, under the heading and toolbar that stay: an icon, a heading, a sentence and the one action.
- Until something exists, it holds the create action.
- Then the page's own action takes over.
Rules
Each empty state says what happened, and offers the one way on.
Use it when
- A list, a table or a page with nothing to show
- A search or filters that match nothing
- Content that failed to load, or that people may not see
- A whole page that can't show, such as one not found
Which to use
Each kind says something different, and offers a different way on.
- First use
Nothing has been made yet.
- No results
A search or a filter matches nothing.
- All done
People cleared a queue, such as their reviews.
- Load failed
The content couldn't load, as a danger Alert.
- No access
The content exists, but not for this person.
- A whole page
The page can't show at all: not found, no access or offline.
Show code, OneAction.tsx
Show code, CompetingActions.tsx
Placement
Centre the state, with a large icon, where it takes a region's place and the region gives it height. In a small card or under a list's toolbar, start it at the edge, with a smaller icon.
Content
The title states the fact, the description says why or what next, and one action at most resolves it.
- First use says what the place is for, "No projects yet", and offers "Create project".
- No results names the query in curly quotes, "Nothing matches “roadmap” with these filters.", and offers "Clear filters".
- A done state stays factual, "No reviews waiting", never "All caught up! Great job!".
- A failure says the work is safe, "Your documents are safe. Check your connection and try again.", and offers "Try again".
- A whole page says what happened in its title: "Page not found", "You don't have access to this page" or "You're offline".
Accessibility
Focus and keyboard
An empty state doesn't take focus; Tab reaches its action after the toolbar. When the action makes the state go, move focus on.
- Clear filters moves it to the search.
- Create project moves it to the new list.
- Try again moves it to the region's heading.