Feedback

Score meter

A 0–100 score with rating bands, as a ring or a bar.

import { ScoreMeter } from '@jsonresume/ui'Source(opens in a new tab)

Examples

Ring

ATS scoreStrong

ReadinessFair

MatchNeeds work

score-meter/ring.tsx

import { ScoreMeter, Stack } from '@jsonresume/ui';

export default function ScoreMeterRing() {
  return (
    <Stack direction="row" gap={10} wrap justify="center">
      <ScoreMeter label="ATS score" value={84} />
      <ScoreMeter label="Readiness" value={63} size={96} />
      <ScoreMeter label="Match" value={31} size={96} />
    </Stack>
  );
}

Bar

Keywords72 / 100

Fair

Formatting95 / 100

Strong

Quantified impact38 / 100

Needs work

score-meter/bar.tsx

import { ScoreMeter, Stack } from '@jsonresume/ui';
import * as styles from './bar.css';

export default function ScoreMeterBar() {
  return (
    <Stack gap={5} className={styles.root}>
      <ScoreMeter variant="bar" label="Keywords" value={72} />
      <ScoreMeter variant="bar" label="Formatting" value={95} />
      <ScoreMeter variant="bar" label="Quantified impact" value={38} />
    </Stack>
  );
}

score-meter/bar.css.ts

import { style } from '@vanilla-extract/css';

export const root = style({ width: 'min(100%, 24rem)' });

Usage

Do

Say what the score measures and what to do about it nearby.

Don’t

Rely on the color: the band label is always shown.

Accessibility

An ARIA meter whose value text includes the band ("84 out of 100, Strong").

Props

Also accepts the attributes of the element ScoreMeter renders.
Prop	Type	Default	Description
label required	ReactNode	–	Visible name, e.g. "ATS score".
value required	number	–
ariaLabel	string	–	Plain-text name for assistive technology when label isn't a string.
bands	ScoreBand[]	[ { min: 0, label: 'Needs work', tone: 'danger' }, { min: 50, label: 'Fair', tone: 'warning' }, { min: 80, label: 'Strong', tone: 'success' }, ]
max	number	100
size	number	128	Ring diameter in px.
variant	barring	ring