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
- Centered region inside the host card or page
- icon
- SF Symbol matching the resource — folder.fill / sparkles / etc — hierarchical at xl
- title
- "No {resources} yet"
- description
- One sentence of context
- primary-cta
- Verb-led CTA — "New {resource}", "Create your first project"
- secondary
- Optional: "Browse templates" / "View examples" / "Read the docs"
- illustration
- Optional hero illustration ≤ 240pt tall — only on first-use page-level empties
States
- empty
- First use, no items yet
- success
- CTA pressed, navigation in progress
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.