Meter

A limit or quota: label and value, a 6px pill track, threshold ticks and a caption. Progress for work.

View source
Monthly budget$32.10 of $50.00
Resets in 12 days
import { Meter, Progress } from "@logicplanes/kaeso-ui";

Props

  • aria-label
    string

    The accessible name, for when there is no visible label.

  • caption
    ReactNode

    "Resets in 12 days"

  • label
    ReactNode

    The label above the bar.

  • leading
    ReactNode

    Leading content in the label row (an icon).

  • thresholds
    number[] = []

    Alert thresholds as ratios, drawn as ticks: [0.5, 0.8].

  • tone
    "neutral" | "auto" = auto

    Colors the bar by how full it is (auto) or keeps it neutral.

  • trailing
    ReactNode

    Content at the end of the label row, such as the value.

  • value
    number

    0–1 (or more when over the limit).

  • valueLabel
    ReactNode

    "$32.10 of $50.00"