errors pattern
No data
List / table / dashboard surface has zero records. The first-use state for a brand-new resource. Different from no-results (a query returned nothing).
When to use it
Brand-new project / fresh user / a resource that legitimately has nothing to show. NOT for failed loads (use 500) and NOT for filter mismatches (use no-results).
- User understands they need to create the first item
- Clear primary CTA naming the next concrete action
- Optional secondary path to docs / examples / templates
- Empty state never feels like an error
Layout regions
- container
- icon
- title
- description
- primary-cta
- secondary
- illustration
States
- empty
- success
Example
<EmptyState
icon={<Icon name="add" variant="hierarchical" size="xl" />}
title="No projects yet"
description="Create your first project to start syncing tokens."
action={<Button onClick={create}>New project</Button>}
secondary={<Link href="/docs">Read the docs</Link>}
/>The full No data pattern specifies 5 exact microcopy strings, 2 motion specs, 7 composition rules — all gated behind the full recipe. Get the full recipe.