Skip to content
KansoMakado design system 1.1
makado.app

Status

Meter

A labeled bar that shows how far something has come: production steps, money collected.

Preview

Live, in this page’s themeOpen on its own

Props

PropTypeDescription
labelReact.ReactNode
valueRequirednumber
valueLabelReact.ReactNode
variant'informative' | 'positive' | 'notice' | 'negative' | 'neutral'
size'S' | 'M' | 'L'
ariaLabelstring
segments{ value: number; variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral' | 'yellow' }[]Split the bar into colored parts side by side, each a share of 100 (stages of the projects in progress). Say what each color is in words nearby.
blendbooleanWith segments, blend each part's color into the next in one continuous fill instead of hard edges.
valueTextstringWhat the bar says, for screen readers, when the visible label does not ("2 editing, 1 filming, 1 late").
classNamestring

Guidelines

A labeled bar that shows how far something has come: production steps, money collected.

Provide: label, value (0 to 100), valueLabel (the words shown on the right; defaults to a percent), variant (informative, positive, notice, negative, neutral) and size (S, M, L).

  • Say the real unit in valueLabel ("Step 4 of 6", "$13,250 of $18,400").
  • Switch to negative only when the thing is late, and say so in the label too.
  • Pass segments to split one bar into colored parts (for example the projects in progress by stage: gray to do, blue in production, orange in review, red late). Name each part in words nearby and in valueText, so the color is never the only cue.
  • Fills use the same-hue gradient-* token for their variant (deeper to lighter, left to right). Segments sit flush, one continuous bar; each part's own gradient marks where it begins. Add blend to fade each part's color into the next instead (one fill, each color at the middle of its part): Home's On track bar uses it.