Empty state
StableWhat a view shows before there is anything in it: a small drawn orbit, a plain title, a line on what will appear, and the next move. Emptiness is an invitation to act, never a dead end.
In a page or a card
md, the default, is for a whole page or a card that has nothing in it yet. Give it the move that fills it: when the empty state is the page's main content, that move is the page's one primary button.
No orders yet
When customers buy, their orders land here. Share your store to bring in the first one.
In a panel or a list of results
sm tightens everything (a 14px title, less padding, and no mark) for panels, search results and filtered lists. It says why the list is empty, and the action undoes whatever emptied it. The mark stays off at this size: two or three small planets side by side on one screen read as clutter.
No products match “oak desk”
Try a shorter search, or check the spelling.
No orders match these filters
Nothing paid by card is waiting to ship this week.
Nothing to fulfil
Every paid order has shipped. New ones will appear here.
A whole screen
lg fills a screen that has nothing else on it: a page that was not found, a server that did not answer, a store the merchant cannot open. The title speaks in Display and the mark grows to 128px. For a page that was not found, pass <OrbitMark state="adrift" />: the satellite slips off its orbit, leaves a dotted trail, and bobs where it stopped. Make the title the page's h1.
Lost in orbit?
The page you're looking for drifted off. It may have been moved or deleted, or the address was mistyped.
The mark
A neutral planet inside a tilted teal orbit, from the Orbit logo. On arrival the mark settles in, the satellite travels once around the planet drawing its orbit behind it, and comes to rest at the upper right, where the comet sits in the logo. The words rise into place after it. It plays once, then holds still.
No products yet
Add your first product, or bring your catalogue across from a spreadsheet.
Without the mark
sm empty states have no mark. On a page, pass mark={null} where it would crowd the words. mark also takes your own illustration in its place, at any size.
Notes
No notes on this order
Notes are for your team. Customers never see them.
In both themes
Light and dark side by side. In dark the orbit and its satellite take the night accent, and the planet stays a shade off the canvas.
No products yet
Add your first product, or bring your catalogue across from a spreadsheet.
No products yet
Add your first product, or bring your catalogue across from a spreadsheet.
Writing an empty state
An empty view is the moment a merchant is most likely to wonder what to do. Say what is empty, what will fill it, and offer the move that fills it. Even a finished job ("Nothing to fulfil") points somewhere useful.
No customers yet
Customers appear here after their first order, or when you import a list.
No data
Nothing to fulfil
Every paid order has shipped.
0 results returned
The request completed with no records.
- Title: what is empty, plainly, in sentence case with no full stop, such as No orders yet.
- "Yet" when it fills on its own, "match" when a search or filter emptied it, "Nothing to" when the work is done.
- Description: a sentence or two on what will appear, or what to try. It wraps at about 44 characters.
- Actions: one or two, each named for what it does. The primary only when the empty state is the page's main content.
- Never blame the merchant, and never sound like an error.
Accessibility
- The title is an
h3by default. SettitleAsto fit the page outline: anh2when the empty state is the page's main content, apinside a panel that already has a heading. - The mark is decorative and hidden from assistive tech.
- When an empty state replaces results as someone types or filters, announce the change yourself, for example with a polite live region that says "No results". The component does not announce itself.
- Under reduced motion the satellite does not travel: the orbit is drawn whole, and the mark, words and actions fade in without moving. Adrift, the satellite waits at the end of its trail and does not bob.
Props
Also accepts every native div attribute except title.
| Prop | Type | Default | Description |
|---|---|---|---|
titleRequired | ReactNode | None | What is empty, plainly: "No orders yet". |
description | ReactNode | None | What will fill it, or what to do next. A sentence or two. |
actions | ReactNode | None | One or two buttons: the next move. |
size | 'sm' | 'md' | 'lg' | 'md' | sm for panels and search results, md for pages and cards, lg for a whole screen. |
mark | ReactNode | None | Replaces the orbit mark, e.g. with <OrbitMark state="adrift" /> or an illustration. null hides it. |
titleAs | 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'h3' | Element for the title. |
OrbitMark
The mark on its own, for the mark prop. Also accepts every native svg attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
state | 'rest' | 'adrift' | 'rest' | rest travels once around and settles. adrift slips off the orbit, for a page that was not found. |