EmptyState
BetaBatch C. What to show when there is nothing to show: no data yet, no results, or a load error.
When to use
Use when an area has no content yet, or a search or filter finds nothing. Say why and what to do next.
When not to use
Don't use while content is loading; use Skeleton. For load errors, use the negative tone with a "Try again" action.
Anatomy
No reports yet
Create a report to track supplier risk.
No rows match these filters
Try fewer filters or a different search.
Could not load suppliers
Check your connection and try again.
- Icon in a circle
- Heading
- One or two sentences
- Main action
- Second action (optional)
Variants
| Case | How |
|---|---|
| No data yet | Explain what will appear and offer the first action. |
| No results | Say nothing matches and offer to clear filters. |
| Could not load | tone="negative". Say what failed and offer Retry. |
States
One state. The buttons inside have their own states.