Feedback
EmptyState
A collection with nothing in it — yet.
Usage
When to reach for it
import { EmptyState } from '@misoto22/design'Notes
A collection with nothing in it — yet.
Distinct from ErrorState: nothing went wrong here, so the copy says what to do rather than what failed. The two are different components because the shared temptation — one component with a variant — produces error pages that read like empty folders.
Anatomy
| Element | Description |
|---|---|
| Framerequired | A centred column with 80px of padding above and below and --page-pad either side. View-scale, and carrying no role and no live region of its own. |
| Medallion | The optional Remix Icon glyph at 24px inside a 56px --stone circle, aria-hidden. Decoration that gives the column something to start from, never the message. |
| Titlerequired | title in the heading face at --fs-sub, rendered through Heading. level picks the element and defaults to 2; the size does not follow it, so the title is --fs-sub at every level. |
| Description | description in --ink-3-aa, capped at 24rem so it stays a readable measure while the column stays centred. |
| Action | The one thing to do next, 32px below the description and the only interactive element the frame offers. |
Best practices
Do
- Announce the swap yourself. This component has no role and no live region, so replacing a SkeletonPage with it removes the region that said “Loading projects” and puts nothing in its place — a screen reader is left at the last thing it heard.
- Say which kind of empty this is. The same component serves a collection that is new and one that a filter has emptied, and “No projects yet” shown over an active filter tells the reader their projects are gone.
- Set level from the heading above it. The default of 2 is right directly under a page’s h1; inside a section that already has its own h2, pass 3. Get it wrong and the outline gains a hole a screen reader navigates by.
Don’t
- Do not show it for a failed request. A reader told the collection is empty acts on it — creating the record they already have, or reporting a data loss that never happened — and the recovery from that costs more than the error page would have.
- Do not put it inside a card or a panel. 160px of vertical padding is sized to stand in for a view, and in a bordered box it reads as a box with a hole in it.
- Do not write a paragraph into description. It is capped at 24rem and centred, so long copy becomes a narrow ragged column that the eye returns from before the sentence that mattered.
Examples
default
A collection that is new, and the one thing to do next. The copy says what to do rather than what failed, which is the whole difference from ErrorState and the reason they are two components rather than one with a variant. The frame carries no role and no live region, so replacing a SkeletonPage with this removes the region that said Loading projects and puts nothing in its place — announce the arrival yourself. title opens a heading at level 2, which is right directly under a page's h1; inside a section that already has its own h2, pass level={3} rather than leaving a hole in heading navigation.
No projects yet
Everything you publish will show up here. Start with the one you are already building.
emptied by a filter
The same component, saying which kind of empty this is. No projects yet shown over an active filter tells the reader their projects are gone, and the recovery from that belief costs more than the sentence would have — so name the filters that are on, say what clearing them brings back, and make the action the way out of the state rather than a second way in. description is capped at 24rem and centred, so it stays a sentence: longer copy becomes a narrow ragged column the eye returns from before the part that mattered.
No projects match these filters
Archived and 2019 are both on. Clearing them brings back 34 projects.
empty or failed
Nothing here yet, against something went wrong. The pair is asymmetric, which is why the distinction matters: a reader told a request failed retries, but a reader told a collection is empty acts on it — creating the record they already have, or reporting a data loss that never happened. So when the request errored, say so, even on the day the list would have been empty anyway. Both are view-sized in real use — the error side is a full viewport and the empty side carries 160px of vertical padding; each is shortened here to share one canvas.
No invoices yet
The first invoice you issue for this client will appear here.
Invoices could not be loaded
The billing service did not answer. Your invoices are not affected.
Check service status