display contract
EmptyState
Placeholder shown when a list, search, or feature has no content yet. Always offers a next step.
Variants
- first-use
- No items yet — invite the user to create one
- no-results
- Search/filter returned nothing
- no-permission
- User has access to the screen but not its data
- illustrated
- Hero with a custom illustration
Sizes
- sm
- Inline empty — 240pt tall
- md
- Card empty — 360pt tall
- lg
- Page empty — 480pt+ tall
Slots
- icon
- title
- description
- action
- Primary CTA
- secondary
- Optional doc link or alternate path
Example
<EmptyState icon={<FolderIcon />} title="No projects yet" description="Create your first project." action={<Button onClick={create}>New project</Button>} />Usage rule
Always provide a next-step action; "no items yet" without a CTA is a dead end.
The full EmptyState contract has 4 more rules, plus the do-not patterns. Get the full recipe.