Skip to content
Site volume
Colourway

Components

ScoreDial

A 0 to 100 score as a ring in one ink, with the band's glyph and word.

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

Example#

Look of this example
Live render of examples/score-dial/basic.tsx

Usage#

Use a score dial for one score out of 100 with a verdict: a Lighthouse score, an audit result. The numeral prints at once; the arc draws in on arrival and stays put.

  • Bands. The default bands are PageSpeed's: 90 and over "Fast" with a circle, 50 to 89 "Needs work" with a half circle, under 50 "Slow" with a triangle. The arc is one ink for every band (N21), so the verdict lives in the word and the glyph.
  • Sizes. s 72, m 128 and l 184 px.
  • Verdict detail, such as what to fix, goes in a Callout beside it.

Anatomy#

The parts of examples/score-dial/basic.tsx, numbered:
  1. Ringdata-mk-part="ring"
  2. NumeralThe score, at its final value at once..mk-score-dial-numeral
  3. Banddata-mk-part="band"
  4. Labeldata-mk-part="label"

Volume#

Reading layer: identical at every volume.

  • Quiet

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

  • Studio

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

  • Press

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

  • Rave

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

Content#

  • The label names what was scored: "Performance", "Accessibility".
  • Use the band words as they are; they match the tool people will check against.

Do and don't#

Do

Names the score.

Don't

A label that says nothing about what was measured.

A score without its subject cannot be checked. The label is in the literal zone; the joke goes in the heading above.

Accessibility#

  • role="meter" with aria-valuetext such as "98 out of 100, fast".
  • Bands are words and glyphs, never colours (N21); the arc draws once and not under reduced motion.

Props#

PropTypeDefaultDescription
value requirednumbernone0 to 100 (clamped, rounded).
label requiredstringnonee.g. "Performance".
size"l" | "m" | "s"m72 / 128 / 184 px; default `m`.
bandsreadonly ScoreBand[]none
captionReactNodenone

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

Tokens#

System tokens (8)

Scanned from its CSS at build and checked against its registry entry; 1 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