RiskMeter
A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value, marked with a thumb handle or a you-are-here pointer.
Implementation previewEvery example. In one place.
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.stories.tsxExport DefaultImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value, marked with a thumb handle or a you-are-here pointer.
Implementation API 1 entry point · source-derived preview
Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.
import { RiskMeter } from '@cloakedinc/design-system';RiskMeterRiskMeterProps
packages/design-system/src/components/visualizations/RiskMeter/RiskMeter.tsx:12
| Prop | Type | Presence | Notes |
|---|---|---|---|
value | number | Required | Risk value from 0 to 100. |
hidden | boolean | undefined | Optional | Hides the visual value while preserving loading semantics.Source default: false |
marker | "thumb" | "pointer" | undefined | Optional | How the value is marked on the track.
- `thumb` (default): a circular handle with the track dimmed past the value.
- `pointer`: the full gradient stays visible and a triangle points up at the
value — for "you are here on the scale" displays rather than progress.Source default: 'thumb' |
ariaLabel | string | undefined | Optional | Accessible label for meaningful risk values. |
testId | string | undefined | Optional | Optional test selector. |
Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.
Overview
A horizontal 0-100 track carrying a low-to-high risk gradient for a single severity value.
When to use
Use RiskMeter when the value has severity meaning — an exposure or risk score — not plain
progress. For neutral completion use HalfGauge; for a bare linear bar use Progress.
The marker picks the reading. thumb (default) is a handle with the track dimmed past the
value, for a progress-like "how bad is it." pointer keeps the full gradient visible with a
triangle pointing at the value, for "you are here on the scale." Set hidden to keep loading
semantics while masking the value.
Used on Playlist Home in DigitalRiskWidget and DigitalRiskDetail (thumb, masked while the
score calculates) and in WebsiteDataView's RiskBand (pointer).
Component specification
$schema
../../../specs/component-spec.schema.jsonParts
- Id
- track
- Label
- Track
- Description
- The rounded 0-100 rail that carries the risk gradient and background.
- Required
- true
- Id
- gradient
- Label
- Risk gradient
- Description
- The low-to-high severity fill painted across the track.
- Id
- thumb
- Label
- Thumb
- Description
- The circular handle placed at the value in the default thumb marker.
- Id
- pointer
- Label
- Pointer
- Description
- The triangle that points up at the value when the pointer marker is used.
Allowed Design Choices
- Variants
- Base
- Label
- Base
- Description
- The value and marker change the reading without changing the component treatment.
- Sizes
- Markers
- Thumb
- Label
- Thumb
- Description
- A circular handle with the track dimmed past the value, for a progress-like reading.
- Pointer
- Label
- Pointer
- Description
- The full gradient stays lit and a triangle points at the value, for you-are-here.
Variants
- Id
- base
- Label
- Base
- Description
- A single gradient track whose marker and value are set by props.
- Platforms
- ios
- android
- web
Sizes
None specifiedMeasurements
- Id
- track-height
- Label
- Track height
- Kind
- exact
- Token
- --cds-size-12
- Value
- 12
- Unit
- px
- Applies To
- track
- Id
- thumb-size
- Label
- Thumb diameter
- Kind
- exact
- Token
- --cds-size-20
- Value
- 20
- Unit
- px
- Applies To
- thumb
- Id
- track-radius
- Label
- Track corner radius
- Kind
- exact
- Token
- --cds-radius-xs
- Value
- 8
- Unit
- px
- Applies To
- track
- Id
- pointer-half-width
- Label
- Pointer triangle half-width
- Kind
- exact
- Token
- --cds-size-8
- Value
- 8
- Unit
- px
- Applies To
- pointer
- Notes
- Each triangle side border is one --cds-size-8, so the pointer is twice that wide and is clamped by its half-width so it never spills past the track ends at 0 or 100.
Layout
- Alignment
- The track stretches to the container width; the marker is positioned along it by value.
- Flow
- A single-row track; the pointer marker adds a triangle in-flow beneath the track.
- Notes
- The thumb marker dims the track past the value; the pointer marker keeps the full gradient lit.
Typography And Color
- Typography
- Label
- Adjacent caption
- Description
- Surrounding score labels and captions use the body-small ramp; the meter draws no text itself.
- Token
- --cds-type-body-small-size
- Colors
- Label
- Track background
- Description
- The unfilled track and the dimming overlay past the value.
- Token
- --cds-graph-bg
- Label
- Low risk
- Description
- The good end of the severity gradient.
- Token
- --cds-risk-good
- Label
- Medium risk
- Description
- The fair midpoint of the severity gradient.
- Token
- --cds-risk-fair
- Label
- High risk
- Description
- The critical end of the severity gradient.
- Token
- --cds-risk-critical
- Label
- Thumb ring
- Description
- The surface-colored ring around the thumb handle.
- Token
- --cds-bg-surface
- Label
- Thumb edge
- Description
- The hairline that separates the thumb from the track.
- Token
- --cds-divider
States
- Id
- value
- Label
- Value shown
- Description
- The marker sits at the clamped 0-100 value and exposes it to assistive technology.
- Id
- loading
- Label
- Loading
- Description
- With hidden set the value is masked and the meter reports aria-busy while a score calculates.
- Id
- decorative
- Label
- Decorative
- Description
- Without an accessible label the meter is presentational and exposes no progressbar role.
Behavior
- Label
- Clamped value
- Description
- Values outside 0-100 are clamped so the marker never leaves the track.
- Label
- Marker reading
- Description
- Use thumb for progress-like severity and pointer for a you-are-here position on the scale.
- Label
- Masked loading
- Description
- Set hidden to keep loading semantics while the value is still being computed.
Accessibility
- Label
- Meaningful value
- Description
- Pass an accessible label so the meter exposes a progressbar with min, max, and the current value.
- Label
- Decorative meter
- Description
- Omit the label when a nearby number already states the score, leaving the meter presentational.
- Label
- Loading is announced
- Description
- While hidden the meter reports busy and withholds the value rather than announcing a stale one.
Content Adaptation
- Label
- Severity only
- Description
- Use RiskMeter when the value has severity meaning; use HalfGauge or Progress for neutral completion.
- Label
- Full-width rail
- Description
- The track fills its container, so give it a bounded width in narrow rows.
Motion Haptics
- Motion
- Label
- Value transition
- Description
- The marker eases to a new value; honor reduced-motion by letting the platform shorten the ease.
- Haptics
- Label
- No feedback
- Description
- The meter is a display and requests no haptic feedback.