sigilUI

Meter

Show a measured value within a known range.

@sigil-ui/componentsReact

Preview

Live preview Interactive

Import

import { Meter } from "@sigil-ui/components";

Usage

<div className="flex flex-col gap-2 w-full max-w-sm">
    <Meter value={72} max={100} label="Storage" />
  </div>

Props

PropTypeDefaultDescription
valuenumber—The current controlled value.
maxnumber—Largest allowed value.
labelstring—Readable label for the component.

Token integration

CSS VariablePurpose
--s-errorError
--s-warningWarning
--s-primaryPrimary
--s-textText
--s-text-mutedText muted
--s-radius-fullRadius full
--s-borderBorder
--s-duration-normalDuration normal