Import

import {
  Empty,
  EmptyIcon,
  EmptyTitle,
  EmptyDescription,
  EmptyAction,
} from "@mikenotthepope/substrateui"

When the empty state is the page

By default Empty is only as tall as its own content, which is right for an empty table or a filtered list with nothing in it — the state sits where the rows would have been.

A 404, an error screen, or a "nothing here yet" page is the other case: the empty state is the page and belongs in the middle of it. fill claims the height the parent offers. Without it the wrapper is five classes — flex flex-1 items-center justify-center plus padding — repeated once per such page.

Pick the right heading level

EmptyTitle renders an h3, which is right when the empty state sits inside a page that already has a heading above it — an empty table on a dashboard, a filtered list with no matches.

It often isn't. A 404, an error screen, or a "nothing here yet" page has the empty state as its entire content, and its title is that document's h1. Use level to move it. The styling comes along, so what changes is the outline, not the look.

Skipping this is easy to miss and costly: a page whose only heading is an h3 reads to a screen-reader user as though two levels went missing, and the alternative — copying EmptyTitle's classes onto your own heading — drifts the moment those classes change.

render={<h1 />} renders the same thing, and is what to reach for when the title should be something that is not a heading — a p in a card that has its own title above. Prefer level for a heading: render puts a childless <h1 /> in your source, which jsx-a11y/heading-has-content reads as an empty heading and reports at every call site. The rule is wrong about it and has no option that can be told so.

Composition

Empty
├── EmptyIcon
├── EmptyTitle
├── EmptyDescription
└── EmptyAction

API Reference