Skip to content
Site volume
Colourway

Components

Badge

A 28 px label chip on its own face: neutral, outline or solid, with an optional line badge.

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

Example#

Look of this example
3 tiers Software Most picked
Live render of examples/badge/basic.tsx

Usage#

Use a badge for a short, static label on something: a tier count, a tag, "Most picked". It is not interactive and not a status: statuses are StatusChip, counts that change are Count.

  • Variants. neutral (default, a raised paper face), outline (a 2 px rule) and solid (the slab with paper text).
  • Line badges. line prefixes a 16 px LineBadge, for tags that belong to a line of work.

Anatomy#

3 tiers Software Most picked
The parts of examples/badge/basic.tsx, numbered:
  1. Badge28 px tall, label role..mk-badge
  2. Labeldata-mk-part="label"
  3. Line badgeOptional, 16 px..mk-line-badge

Volume#

Reading layer: identical at every volume.

  • Quiet

    3 tiers Software Most picked

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

  • Studio

    3 tiers Software Most picked

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

  • Press

    3 tiers Software Most picked

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

  • Rave

    3 tiers Software Most picked

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

Content#

  • One to three words in sentence case: "3 tiers", "Most picked".
  • Never a call to action: a badge cannot be pressed.

Do and don't#

Do

Most picked

A label.

Don't

Click to upgrade

A label pretending to be a key.

Badges look a little like keys but do nothing. Words that ask for a press belong on a Button.

Accessibility#

  • Not interactive; the 14 px label role prints only on the badge's own paper, plate or slab face.

Props#

PropTypeDefaultDescription
variantBadgeVariantnone
line"custom-apps" | "growth" | "maxos" | "software" | "websites"nonePrefixes a 16 px `LineBadge`.
children requiredReactNodenone

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

Tokens#

System tokens (8)

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