EmptyState
stableserver-safe
Nothing here yet. Say what would be here and how to put it there — the dashed border marks a space waiting to be filled rather than a failure.
With an action
No pins yet
Paste a link from any allowed source and it becomes a pin. Your board holds 100.
<EmptyState
title="No pins yet"
action={<Button variant="primary">Add your first pin</Button>}
>
Paste a link from any allowed source and it becomes a pin.
</EmptyState>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | ReactNode | — | What's missing. |
| action | ReactNode | — | The one thing to do about it. |
Guidance
Do
- Give them the next step. An empty state is the one moment you have their full attention.
Don't
- Don't just write "No results." It wastes the space and tells them nothing.