Empty states appear when: a user first accesses a feature (no history data), search/filter results are zero, or content has been cleared.
Handling empty states correctly significantly reduces user disorientation and guides the next action.
Anatomy
- Illustration — A lightweight illustration or icon that visually communicates "this is empty"
- Title — Concisely describes the current state (e.g. "No products found")
- Description — One sentence explaining the reason or suggestion (e.g. "Try adjusting your filters")
- Action Button (optional) — Guides the user to take action (e.g. "Add product")
Components Used
- Button — Action guidance
Do's and Don'ts
Do
- Provide a clear next step
- Use a friendly, positive tone
- Distinguish "no data" from "no search results" — they should have different copy
Don't
- Don't show only a blank area with no guidance
- Don't use technical error language (e.g. "null result")
- Don't place multiple action buttons in the empty state — keep focus singular
This page is a work in progress and will include an interactive Demo and full design specifications.