Meter

Thinner progress bar.

Import

import { Meter } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/progress.

Usage

<Meter value={60} max={100} aria-label="Meta de ingresos del día" />

Props

Prop	Type	Default	Description
value *	number
max	number

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Empty
• Complete
• Custom Max
• Thin Meter
• Comparison

Source

packages/ui/src/atoms/progress/progress.tsx