Empty Composition
The screen a person meets before your product has done anything for them. It has three flavours because "nothing here yet", "nothing matched", and "we could not load this" are three different messages, and using one for all three is how a first-run screen ends up apologising.
Usage
No invoices yet
Invoices appear here once your first customer is billed.
Nothing matched “quarterly”
Try a shorter term, or clear the status filter.
<Empty icon={<Inbox size={22} />} title="No invoices yet" description="Invoices appear here once your first customer is billed." actions={<Button size="sm">Create an invoice</Button>}/>Do
Give a first-run empty state the action that fills it — it is the best call to action in the product.
Don't
Show 'No results' with no way back; a search empty state should offer to clear the filter that caused it.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| title | ReactNode | — | What is not here. |
| description | ReactNode | — | Why, or what to do about it. |
| icon | ReactNode | — | Sits in a token-coloured circle above the title. |
| actions | ReactNode | — | One primary action is usually enough. |
| variant | 'first-run' | 'search' | 'error' | 'first-run' | error tints the icon; the rest is copy. |