ScoreRing
A score out of a known maximum, such as an audit result out of 100. Pick it for one to four headline scores; use Meter of the feedback group for levels in a list.
- ScoreRing
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ScoreRing
PerformanceGood
AccessibilityNeeds work
Best practicesPoor
SearchNot measured yet
Checklist
Dark theme, ScoreRing
PerformanceGood
AccessibilityNeeds work
Best practicesPoor
SearchNot measured yet
Checklist
High contrast theme, ScoreRing
PerformanceGood
AccessibilityNeeds work
Best practicesPoor
SearchNot measured yet
Checklist
UsageLink to the section Usage
import { ScoreRing } from '@skribly/ui/charts'<ScoreRing value={92} label="Accessibility" showLabel ratingLabels={{ good: 'Good', fair: 'Needs work', poor: 'Poor' }} />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- A meter named by label, with its value and range.
- The rating is a word with its own icon shape, linked as the description, so the colour is never the only sign.
- Without a score the ring is empty, shows a dash and reads emptyLabel.
- The ring animates only without reduced motion, and uses Highlight in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.