Empty state
● Stable · v0.1What a screen shows before there's any data — the first thing a brand-new user sees. Never a blank screen: an empty state says why it's empty and what to do next, so a first-timer with no data yet still knows their one next step.
In context
Purpose
Empty state turns "there's nothing here" into "here's how to start". On first run, this is the onboarding — it has to orient the user and hand them a single, concrete action.
Anatomy
- Icon (optional) — a quiet visual cue for what's missing.
- Title — what's empty, in plain words ("No sales yet").
- Description — why it's empty and what happens once it isn't.
- Action (optional) — the single next step ("Record a sale").
Code
import { EmptyState } from '@daytwo/components'<EmptyStatetitle="No sales yet"description="Record your first sale and it'll show up here."actionLabel="Record a sale"onAction={startCapture}/>
When to use
- The first run, before the user has entered anything.
- A list or filter that legitimately has no results yet.
When NOT to use
- While data is loading — that's a loading state (a skeleton), not empty. Showing "No sales yet" mid-load is a lie that erodes trust.
- To hide an error — if something failed, say so and offer recovery; don't pretend it's empty.
The correct scenario
A new shop owner opens the sales screen for the first time. Instead of a blank page, they see "No sales yet — record your first sale and it'll show up here," with one teal button. They know exactly what to do without anyone explaining.
Anti-patterns
For a first-time user, the empty state is the product's first sentence. Make it orient them and offer exactly one next step.