display contract
EmptyState
Placeholder shown when a list, search, or feature has no content yet. Always offers a next step.
Variants
- first-use
- no-results
- no-permission
- illustrated
Sizes
- sm
- md
- lg
Slots
- icon
- title
- description
- action
- secondary
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.