ScoreBadge sizes

Three sizes and the three grades. The thresholds can change, for example for a check where 70 is already good.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

tsx

import { ScoreBadge } from '@skribly/ui/ops'

tsx

<ScoreBadge value={58} label={t('audit.seo')} size="sm" thresholds={{ good: 80, fair: 50 }} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

Each badge is a named meter.
Without gradeLabels it reads its percentage; pass valueText to say it in other words.

This demo runs through axe in all three themes on every test run. See what the tests check.