Data State
The single conditional swap point for a data surface, and the place the design system says what an ABSENCE is.
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/data-state.jsonnpx shadcn@latest add @interlace/data-stateBehavior
What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.
9 states, one closed union — not a boolean per condition. Partial is a state, not an absence: a spinner that hides progress, or a missing prior rendered as 0, is the failure this model exists to make impossible.
| State | Reads as | Role | Encoding |
|---|---|---|---|
| loading | loading | Stands instead of the body | muted |
| error | ! error | Stands instead of the body | danger |
| not-applicable | n/a | Stands instead of the body | hatchedrecede |
| not-counted | not counted | Stands instead of the body | hatchedmuted |
| empty | — none | Stands instead of the body | muted |
| partial | ≥ partial | Stands next to the body and changes how to read it | dashedmuted |
| truncated | ⋯ truncated | Stands next to the body and changes how to read it | dashedmuted |
| first-measurement | · first measurement | Stands next to the body and changes how to read it | dashedaccent |
| idle | — | The absence of absence | muted |
Hatched and dashed are the two absences drawn apart on purpose: not-counted means no measurement was taken and is never a zero; truncated means the total is unknown and must never be used as a denominator. Each state also carries a spoken announcement — transitions, never ticks.
Measured contrast
packages/ui/__tests__/theme-contract-lock.test.ts ↗Every semantic colour pair this component's own source uses, measured against the shipped hexes in all 4 theme × scheme combinations. The tightest is destructive on background at 7.60:1 (harbor · light), against a floor of 3:1.
| Pair | interlacelight | interlacedark | harborlight | harbordark | Floor |
|---|---|---|---|---|---|
| destructive on backgrounddestructive tint on the page surface | 8.31:1 | 10.43:1 | 7.60:1 | 10.03:1 | 3.0:1SC 1.4.11 |
| muted-foreground on backgroundsecondary copy | 9.41:1 | 11.32:1 | 7.82:1 | 9.52:1 | 4.5:1SC 1.4.3 |
| destructive on carddestructive tint inside a card | 8.31:1 | 9.66:1 | 8.02:1 | 9.09:1 | 3.0:1SC 1.4.11 |
| muted-foreground on cardsecondary copy in a card | 9.41:1 | 10.48:1 | 8.25:1 | 8.64:1 | 4.5:1SC 1.4.3 |
| primary on backgroundprimary tint on the page surface | 8.80:1 | 11.79:1 | 8.39:1 | 10.03:1 | 3.0:1SC 1.4.11 |
| primary on cardprimary tint inside a card | 8.80:1 | 10.92:1 | 8.86:1 | 9.10:1 | 3.0:1SC 1.4.11 |
Text pairs are held to 4.5:1 (WCAG 2.2 SC 1.4.3); borders, rings and chart axes to 3:1 (SC 1.4.11 non-text). Bold is the worst cell in the row — the one a brand fork has to keep an eye on.
Text equivalent
packages/ui/src/primitives/data-state.tsx ↗A chart's alt text is not a sentence about the chart — the equivalent of the data is the data. This is what a screen reader gets, read out of the source the install writes into your tree.
Ships sr-only copy for what the visual carries by position, colour or icon alone — a label, not a full data equivalent.
Runtime contract
packages/ui/vitest.config.ts ↗Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.
- Render boundary
server componentRenders during SSR / RSC with no hydration cost. It can be imported from a server component without pulling the page into the client.
- Minimum viewport
MIN_VIEWPORT = 320Declared, not assumed. Below 320 CSS px the preflight contract draws a dev-mode outline — how to switch it on.
- Coverage gate
100% × 4Inside the v8 gate: lines 100, statements 100, functions 100, branches 100. A threshold under 100 only records how much you stopped caring, so there isn't one.
History
This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
@interlace/ui 1.1.01 entry
- Addedminor
Absence becomes a first-class value.
DataStategrows from four states to nine, and two new primitives consume the union as a contract rather than each re-deriving it from a boolean ladder. The states areloading · error · not-applicable · not-counted · empty · partial · truncated · first-measurement · idle, and that list is also the precedence order — lowest wins. Error beats empty, because a failed fetch is not "no results". Truncated is not empty at all: it qualifies a body that still renders. States co-occur, soresolveDataStatereturns the winner AND every loser asqualifiers, the wrapper publishes them asdata-qualifiers, and the announcement says all of them — a list that is both partially covered and truncated is wrong twice and now says so twice. Each state is drawn distinctly and, more importantly, **announced**. A diagonal hatch means no run happened; a dashed outline means not yet real; the accent is spent onfirst-measurementalone, because it is the only absence a reader can act on. Every one of those carries a sentence viaannounceDataState— "Not counted. No measurement was taken; this is not a zero." A hatch that exists only in pixels keeps the distinction for sighted readers and destroys it for everyone else, and axe scores that green.StatStripis the dense measurement grid that appeared in all six of the audited artifacts, hand-rolled four times: mono micro-label,tabular-numsvalue, optional note, optional delta, on a<dl>so every number keeps its label. It renders the three-state null honestly — a metric withprior: nullshows "first measurement" and the caller's delta node is **not rendered at all**, so there is no path by which a missing prior reaches the DOM as+0%.Meterabsorbs three hand-rolled bars (an odds bar, a score meter, a reviewer bar). Magnitude is carried by length AND by the printed number, never by hue, and the number is not optional.value: nullhatches by default rather than drawing an empty bar, because an empty bar and a measured zero are the same picture.variant="dead"recedes without vanishing, for a dormant row that still holds its rank.RankedBarListis the repeated-row composition and supports a labelled log scale, so a 10k row and a 10M row can share an axis. Pure logic ships alongside asdata-state-modelandmeter-scale— the union, the precedence, the announcements, the scale maths — with no React import, exported for callers wiring their own state.Skeletongainsmeterandstat-stripvariants, both composites, so the loading state reserves the real silhouette on the real breakpoints. Not included, deliberately: the domain vocabularies these were extracted from (authority,visibility,dormant,unwritten,ungated) stay in their artifacts as labels a caller passes in. They are subject-matter, not design system — the DS ships the two axes underneath them (does it recede or does it act, and did a run happen) rather than nine nouns it cannot define.
Import
15 named exports — pull the parts you need.
import { DATA_STATES, DATA_STATE_PRESENTATION, DataState, DataStateBadge, DataStateEmphasis, DataStateName, HATCH_CLASS, HATCH_CLASS_FAINT, MIN_VIEWPORT, QUALIFYING_STATES, REPLACING_STATES, announceDataState, presentationFor, replacesBody, resolveDataState } from '@/components/ui/data-state';API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
DataStateBadgeProps
Also accepts every <span> attribute.
| Prop | Type | Description |
|---|---|---|
| state* | DataStateName | — |
| announce | AnnouncementOptions | Context for the spoken sentence — noun, shown count, coverage, reason. |
| label | React.ReactNode | Visible label override. The SENTENCE is not overridable — a caller who shortens "not counted" to "n/c" must not also be able to shorten what a screen reader hears down to nothing. |
| glyphOnly | boolean | Hide the visible label and keep only the glyph. For dense cells. |
DataStateProps
Also accepts every <div> attribute.
| Prop | Type | Description |
|---|---|---|
| data | T | The data to render. Only narrows the children's typed parameter — the decision to render children is driven by the flags, not by this value. |
| skeleton | React.ReactNode | Loading-state UI. Defaults to a single full-width Skeleton rect. |
| skeletonVariant | SkeletonVariant | Optional shortcut: pick a `<Skeleton variant>` instead of passing a node. |
| errorState | React.ReactNode | Error-state UI. Defaults to a minimal `role="alert"` line. |
| emptyState | React.ReactNode | Empty-state UI. Defaults to a minimal muted line. |
| notApplicableState | React.ReactNode | UI for the two "there was never going to be a value here" states. Defaults to a `DataStateBadge`, which is usually the right answer — these states belong in a cell, not in a full-page panel. |
| notCountedState | React.ReactNode | — |
| announce | AnnouncementOptions | Context for every announcement this instance emits. |
| notice | boolean | Render badges for qualifying states (`partial` / `truncated` / `first-measurement`) above the body. The sr-only announcement is emitted either way — set this to `false` only when the surrounding surface already shows the same badge, never to make the caveat go away. |
| children* | (data: T) => React.ReactNode | Idle render. Receives the (narrowed-non-null) `data` value. Runs whenever the resolved state does not replace the body — which includes the qualifying states, because those annotate real data rather than hide it. |
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- No animation to gate.
- ARIA in the source
role="alert"role="status"aria-busy
Examples
7 more states from the same story file.
R-rule compliance
Every primitive in @interlace/ui models to the portable 26-rule floor enforced by the componentApi ESLint preset. The cells below pin exactly where each rule applies in this file.
| Rule | Concept | Where |
|---|---|---|
| R4 | Extends prop bag | `Omit<ComponentProps<'div'>, 'children'>` + `DataStateFlags` |
| R6 | data-slot on root | `data-slot="data-state"` + `data-state` + `data-qualifiers` |
| R7 | className merged + ...rest | `cn(className)` + `{...props}` |
| R8 | No `isXxx`; explicit booleans | one boolean per absence — they co-occur, so no enum |
| R10 | Composition seam (children fn) | `children: (data: T) => ReactNode` |
| R13 | Ecosystem first | No state machine — an ordered array IS the precedence |
| R18 | Tailwind only | Zero inline `style`; the hatch is a Tailwind arbitrary bg |
| R19 | Tokens only | `--viz-axis` / `--muted-foreground` / `--primary` / `--destructive` |
| R20 | AA contrast | contrast table in `data-state-model.ts` |
| R25 | Server component | Pure render — no hooks |
| R26 | A11y | role=status/alert, aria-busy, sentence per state |
Minimum viewport
This primitive declares MIN_VIEWPORT = 320 CSS px (DESIGN_PRINCIPLES #14). When mounted in a container narrower than this, the preflight contract draws a dev-mode outline so the regression is visible during local development.
<body data-interlace-dev>...</body>
Add the data-interlace-dev attribute to the body in development builds only — preflight then outlines any primitive whose container is below its declared data-min-viewport.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/data-state.tsx once installed.
import * as React from 'react';
// @interlace/data-state v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/data-state
// What changed since: https://ds.interlace.tools/c/data-state#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — DataState
*
* The single conditional swap point for a data surface, and the place the
* design system says what an ABSENCE is.
*
* It started as the four-state ladder every fetch site otherwise re-writes:
*
* {isLoading ? <Skeleton /> :
* error ? <ErrorState /> :
* !data?.length ? <EmptyState /> :
* <ListOfThings items={data} />}
*
…356 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.