Meter

Installation#

npmpnpmyarnbun

npx sugarcoat add meter

Default

With Label

Available in multiple sizes.

Sizes

Meter supports different color variants for semantic meaning.

Colors

Use min and max to define custom ranges.

Custom Range

Storage Usage

<Meter value={75}>
  <Meter.Label>Label</Meter.Label>
  <Meter.Track>
    <Meter.Indicator />
  </Meter.Track>
</Meter>

Import

import { Meter } from "@sugarcoat/ui-nxt";

Usage

<Meter value={75} color="primary" size="md">
<Meter.Label>75% Complete</Meter.Label>
<Meter.Track>
  <Meter.Indicator />
</Meter.Track>
</Meter>

Prop	Type	Default	Description
value	number	-	Current value of the meter
min	number	0	Minimum value
max	number	100	Maximum value
size	"sm" \| "md" \| "lg"	"md"	Size of the meter
color	"default" \| "primary" \| "success" \| "warning" \| "danger"	"primary"	Color variant
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax