Empty States

Empty States

Empty states are opportunities to guide, educate, and delight users — not dead ends.

Zero Data

When a view has no content yet (new account, empty list).

Structure:

1. Illustration or icon (48px)
2. Headline explaining the state
3. Subtitle with helpful guidance
4. Primary action button (“Create your first…”)

Error State

When data fails to load or an action fails.

Structure:

1. Error icon (warning triangle)
2. Headline: “Something went wrong”
3. Description of what happened
4. Retry button + alternative action

Loading State

While content is being fetched or processed.

Options:

Type	Use case
Skeleton	Content-heavy pages (articles, dashboards)
Spinner	Quick actions (< 2 seconds)
Progress	Longer processes (uploads, exports)

Best Practices

• Never leave a blank screen — always show a state
• Use brand tone in empty state copy — friendly, not robotic
• Provide a clear next action — don’t just say what’s missing
• Skeleton screens should match the shape of the content they replace