First-run and zero-data moments that point forward.
| Prop | Type | Notes |
|---|---|---|
| icon | ReactNode | The 56px glyph tile |
| title / description | string | What's missing, and why |
| tone | neutral · warm · error | Tints the icon for onboarding vs failure |
| code | string | Optional error code (404, 500) |
| action / secondaryAction | { label, onClick } | A warm primary and optional ghost |
An Empty State fills a zero-data or error moment with a way forward. For a transient message use a Snackbar; while data loads use a Skeleton.
Always give a way forward — the empty state should point somewhere.
Don't leave a bare "No data". That's a dead end, not a state.
Own errors plainly, add a code, and offer Retry.
Don't be cutesy about failure. Be clear, calm and useful.
Inside a table or list that has no rows to show.
A full-page 404 with a route back home.
Onboarding the first time a surface is opened.
| Token | Value | Role |
|---|---|---|
| --empty-icon | 56px · radius 15 | Glyph tile |
| --empty-bg | #0C0D10 | Stage background |
| --empty-title | #F2F3F5 | Heading colour |
| --empty-warm | rgba(255,122,0,.07) | Onboarding icon tint |
| --empty-error | rgba(235,74,79,.07) | Failure icon tint |
| --empty-pad | 42px 26px | Column padding |
<div class="o-empty">
<span class="o-empty__icon"><BoxIcon /></span>
<span class="o-empty__title">No projects yet</span>
<span class="o-empty__text">Projects you create will show up here.</span>
<div class="o-empty__actions">
<button class="o-btn o-btn--brand">New project</button>
</div>
</div>