EmptyState shows a placeholder when a content area has no data. Use it for empty lists, zero search results, first-time setups, or cleared inboxes. Always include a title and a next step so the user is not stuck.
ts
| Guidance | Practices |
|---|---|
| Do | Include a clear title and a call-to-action button so users know how to proceed. |
| Do | Use an illustration or icon that reinforces the context of the empty state. |
| Do | Use the compact variant inside cards or sidebars where space is limited. |
| Don't | Leave an empty state without guidance; always explain what happened and what the user can do next. |
| Don't | Use a generic message like "No data"; be specific about what is empty and why. |
| Don't | Use an EmptyState for error messages that require immediate action; use a Banner instead. |
Full empty state with icon, message, and action buttons. Use when a search returns no results, a filter clears all items, or a list has been emptied. The buttons give the user a way forward: go back, clear filters, or try a different query.
Smaller empty state with reduced spacing for constrained areas. Use inside sidebar panels, card widgets, or notification drawers where a full-size empty state would overwhelm the layout.
Empty state wrapped in a Card for first-time setup or onboarding. Use when the user has not created any items yet, like a project list, team roster, or dashboard widget that will fill with data once they take action.