i

Empty state

Showing state and identity · researched

Explains why an area has nothing to show and offers the next step.

molecule · Carbon: Empty states · also called Blank slate, Empty

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Empty native: partly antd 6.6.5
Variants
—
Sizes
—
States documented
—
Accessibility guidance
no

Div with an img (default illustration) and description; children slot holds a follow-up action such as a button.

docs ↗ · code ↗

Carbon

Empty states contested native: no @carbon/react 1.117.0
Variants
No data, User action, Error management
Sizes
sm, md
States documented
—
Accessibility guidance
yes

A pattern page (anatomy, types, image and layout guidance) with an Accessibility section, but no component in the react or web-components source; teams compose it from existing parts. Gallery should decide whether a pattern counts.

4 corrected on re-read
  • builds_on_native: null → "no" Example EmptyState renders div with p and img/illustration; not a published component
  • variants: null → ["No data","User action","Error management"] Pattern page 'Types of empty states' headings
  • sizes: null → ["sm","md"] Reference example size propType oneOf md, sm (example code, docs silent)
  • urls: {"docs_url":"https://carbondesignsystem.com/patterns/empty-states-pattern/","code_url":null} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/patterns/empty-states","code_url":null} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/patterns/empty-states; No component in react or web-components src; reference implementation only at src/examples/EmptyState (div/p/img, not exported)

docs ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No empty-state component; searched docs text for 'empty state' and 'no results' with no hits. Page-not-found and service-unavailable pages are patterns for whole-page errors.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. Nothing named empty/blank state anywhere.

Primer

Blankslate native: no @primer/react 38.40.1
Variants
border, narrow, spacious
Sizes
small, medium, large
States documented
—
Accessibility guidance
yes

Primer React. Page status experimental. div-based; Visual, Heading, Description, PrimaryAction, SecondaryAction slots. Empty states UI pattern page exists but is guidance, not the component. No accessibility page (only Overview and Guidelines).

1 corrected on re-read
  • a11y_documented: "no" → "yes" No Accessibility tab (route is an empty shell), but Guidelines tab has screen-reader guidance on graphics

docs ↗ · code ↗

Spectrum

Illustrated message native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
S, M, L
States documented
default
Accessibility guidance
no

Docs from the rsp page and swc page; sizes and orientation from the rsp IllustratedMessage.json. It is an illustration plus heading and description (SWC 1st-gen renders div and h2); no native element applies. Implementations: S2, v3, SWC 1st-gen and gen2, spectrum-css 9.2.0. Not in installed SWC 1.12.4. The rsp page has no accessibility section.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no empty-state component, package or pattern; the 404 page template is a whole-page template, not an in-area empty state.

Platform facts

Native elementnot recordedNo HTML element, ARIA role or APG pattern for an empty state. Spec/MDN define only generic content elements (p, h1-h6, img, button) that an empty state is built from.
Baseline—
APG patternnone
ARIA role—
Shipped by4 of 7 systems

Anatomy

    The seven states

    default Message shown when the area has no content.
    hover n/a — Container is not interactive.
    focus n/a — Not focusable unless its action is.
    active n/a — Not interactive.
    disabled n/a — Not defined by APG or HTML.
    error n/a — Not defined by APG or HTML.
    loading n/a — Not defined by APG or HTML.

    Every cell was read twice, the second time from raw sources by a separate pass. 5 of 35 fields changed on the second read — open any “corrected” note to see what it said before.