Empty state

EmptyState fills the space a list or panel leaves when it holds nothing: a 48 px shape glyph, a title in head-card, one line that says what is missing and how it appears, and at most one action, inside a dashed die-line frame, an unprinted plate. Optional art (an <Art>) sits beside the words from the md container width, never behind them. Copy stays literal: "Nothing here yet.", never "All caught up!".

Example#

Volume

Paper

Colourway

Nothing here yet.

Saved searches show up here. Save one from the search box.

Live render of examples/empty-state/basic.tsx

Usage#

Use an empty state where a list or panel has nothing in it yet: no projects, no results, no messages. It says what is missing and how it appears, with at most one action.

Parts. A 48 px shape glyph, a title, one line of description and an optional action, inside a dashed die-line frame, an unprinted plate.
Art may sit beside the words from the md width, never behind them.
Copy is literal (D-I2): "Nothing here yet." The joke, if any, goes beside it.

Anatomy#

Nothing here yet.

Saved searches show up here. Save one from the search box.

Glyphdata-mk-part="glyph"
Titledata-mk-part="title"
Descriptiondata-mk-part="description"
Actiondata-mk-part="action"

Volume#

Reading layer: identical at every volume; optional art follows the volume.

Quiet
Nothing here yet.
Saved searches show up here. Save one from the search box.
Docs, forms, legal and long reads. Flat inks, no art in motion.
Studio
Nothing here yet.
Saved searches show up here. Save one from the search box.
The site default. Art on its own plates, one display moment per view.
Press
Nothing here yet.
Saved searches show up here. Save one from the search box.
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
Nothing here yet.
Saved searches show up here. Save one from the search box.
Launches, posters and the 404. Every ink, and the words still win.

Content#

Title: what is missing, plainly: "No projects yet".
Description: how it fills up: "Projects appear here when you start one."
Action: the verb that fills it: "Start a project".

Do and don't#

No projects yet

Projects appear here when you start one.

Says what is missing and why.

Don't

All caught up!

Nothing to see here, champ.

Cheerful and empty.

An empty screen is a question: is something broken? Literal copy answers it; a cheer does not.

Accessibility#

The title is a real heading (headingLevel, default 3); the glyph is decorative.
The one action is a normal Button or Link with a literal verb.

The colour pairs it prints, with their contrast on both papers:

Text	Surface	Role	Bone	Night
`--mk-ink-2`	`--mk-paper`	meta	7.21:1 · Lc 80.3, passes	12.18:1 · Lc 77.4, passes
`--mk-ink-2`	`--mk-paper-sunken`	meta	6.65:1 · Lc 75.1, passes	11.67:1 · Lc 77.0, passes
`--mk-ink-2`	`--mk-paper-plate`	meta	8.06:1 · Lc 87.9, passes	11.29:1 · Lc 76.6, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

Prop	Type	Default	Description
`title` required	`ReactNode`	none
`description`	`ReactNode`	none	One line: what is missing and what makes it appear.
`action`	`ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	none	At most one action (a `Button` or a `Link`).
`glyph`	`GlyphName`	`square`	The shape glyph (default `square`, an empty plate).
`art`	`ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	none	An `<Art>` beside the words (below them on phones).
`headingLevel`	`2 \| 3 \| 4`	`3`	The title's heading level (default 3).

Plus 278 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from EmptyStateProps in packages/overprint-react/src/reading/empty-state/empty-state.tsx.

Tokens#

System tokens (10)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.9.0.

0.9.024 October 2026

MinorreactBreadcrumbs, Pagination (with paginationRange), Count, ProgressBar (bar, segments, indeterminate), Avatar and AvatarGroup, Tick, EmptyState, Kbd, Skeleton and Loader. Read the whole entry
Patchreact, threeCombobox gives its inline list an id and the input's name in the server markup and marks its box as the input's focus-ring host, and a highlighted row's second line prints in --mk-text; the EmptyState and Popover descriptions print in the meta role (16 px, 500, so --mk-text-2 clears the APCA floor); SplashTitle's Quiet heading prints on its own paper plate and wraps inside its cell; the Toast viewport and specimen keep one column no wider than their box; ProofSheet's frame links draw the focus ring. Read the whole entry