Skip to content
Site volume
Colourway

Components

StatusChip

Status without traffic lights: a neutral pill, the literal word and a shape that repeats it.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/status-chip
On this page

Example#

Look of this example
Live In development Preparing release
Live render of examples/status-chip/basic.tsx

Usage#

Use a status chip to say where a project or product stands: live, in development, preparing a release. The word is the status; a small piece beside it repeats it in shape, so nothing depends on colour (N9).

  • Statuses. live, released, in-development, preparing and private-preview, each with its default label and piece.
  • children override the label, such as "Live · fernlight.example".
  • No traffic lights and no blinking. Every Process ink already means a line of work (D-C2), and ambient loops settle (D-E3).

Anatomy#

Live In development Preparing release
The parts of examples/status-chip/basic.tsx, numbered:
  1. Piecedata-mk-part="piece"
  2. Labeldata-mk-part="label"

Volume#

Reading layer: identical at every volume.

  • Quiet

    Live In development Preparing release

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    Live In development Preparing release

    The site default. Art on its own plates, one display moment per view.

  • Press

    Live In development Preparing release

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Live In development Preparing release

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • Use the status words exactly: Live, Released, In development, Preparing release, Private preview. They are literal (D-I2).
  • An override adds detail after a middle dot; it never replaces the status word.

Do and don't#

Do

In development

The literal status.

Don't

Cooking

A joke where the status should be.

Status words are in the literal zone (D-I2). The joke can go in the headline next to it.

Accessibility#

  • The word is the status; the piece's shape only repeats it, and it never animates (N9).

Props#

PropTypeDefaultDescription
status requiredStatusnone
childrenReactNodenoneOverrides the label ("Live · fernlight.example"); the default, and the fallback for an empty string, is the literal status word: a status always shows a word (10 LC-10).

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

Tokens#

System tokens (9)

Scanned from its CSS at build and checked against its registry entry; 2 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry