Components/Risk Score Badge
Risk Score Badge
Compact visual for a risk score. Three variants — badge, bar, gauge — share the same level-derivation logic, so a score of 68 always reads "High" regardless of which form you pick. Scales gracefully from 0–100 (Pix risk score) to 300–1000 (credit-bureau).
Low12Moderate32Elevated55High74Critical92
Installation
npx ajaxui add risk-score-badgeVariants
Pick the variant that fits the surface: badge inline in tables, bar in compact panels, gauge for hero positions.
High68badge
68bar
68Highgauge
Sizes
68Highsm
68Highmd
68Highlg
Try it
Drag the slider — all three variants update in lockstep because they derive the level from the same input.
42
Elevated424242Elevated
Custom scale
Set scale to adapt to bureau-style ranges or any other scoring system. Level cutoffs are relative to the scale (low < 20%, moderate < 40%, elevated < 60%, high < 80%, critical ≥ 80%).
720420870
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| score | number | — | Raw score. Clamped to the scale. |
| scale | { min: number; max: number } | { min: 0, max: 100 } | Score range. |
| variant | "badge" | "bar" | "gauge" | "badge" | Visual form. |
| size | "sm" | "md" | "lg" | "md" | Footprint. |
| level | "low" | "moderate" | "elevated" | "high" | "critical" | auto | Override the auto-derived level. |
| label | string | — | Adds context to the ARIA label. |
| showValue | boolean | true | Show the numeric score. |
| locale | string | "en-US" | Locale for number formatting. |