Meter

A styled native <meter> gauge paired with an optional value label, stacked in a single column so a caption can sit alongside the bar it measures.

Usage this month

Storage4.5 GB of 10 GB

Bandwidth920 GB of 1 TB

Seats8 of 10 in use

View code

<div mix={[vstack({ gap: 5, align: "stretch" })]}>
	<Header mix={[m(0)]}>Usage this month</Header>

	<Meter>
		<div mix={[hstack({ gap: 2, justify: "between" })]}>
			<span mix={[text("sm"), weight("medium")]}>Storage</span>
			<Meter.ValueLabel>4.5 GB of 10 GB</Meter.ValueLabel>
		</div>
		<Meter.Indicator value={45} max={100} aria-label="Storage used" />
	</Meter>

	<Meter>
		<div mix={[hstack({ gap: 2, justify: "between" })]}>
			<span mix={[text("sm"), weight("medium")]}>Bandwidth</span>
			<Meter.ValueLabel>920 GB of 1 TB</Meter.ValueLabel>
		</div>
		<Meter.Indicator color="danger" value={92} aria-label="Bandwidth used" />
	</Meter>

	<Meter>
		<div mix={[hstack({ gap: 2, justify: "between" })]}>
			<span mix={[text("sm"), weight("medium")]}>Seats</span>
			<Meter.ValueLabel>8 of 10 in use</Meter.ValueLabel>
		</div>
		<Meter.Indicator
			color="success"
			value={8}
			low={3}
			high={9}
			optimum={10}
			max={10}
			aria-label="Seats in use"
		/>
	</Meter>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Meter } from "@sdxc/ui";

Renders the root column: a <div> stacking Meter.Indicator and an optional Meter.ValueLabel with a small gap. The native <meter> inside already exposes the platform's meter semantics.

Composition

The parts the component publishes, each a static property of the host.

Meter
Meter.IndicatorRenders the gauge as a pill-shaped track filled in a semantic color, mirrored across each engine's fill pseudo-elements so low/high/optimum keep shaping accessible semantics independently of the rendered color; dev mode warns when no accessible name is set.
Meter.ValueLabelRenders the gauge's caption: a <span> sized as a small run of body copy in the neutral muted foreground color, for a percentage or status string placed alongside Meter.Indicator.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.

Meter.Indicator

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the gauge's fill. Defaults to DEFAULT_COLOR.

Also accepts everything in TagProps<"meter">.

Meter.ValueLabel

Also accepts everything in TagProps<"span">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*-bg-solid` variable for the gauge's filled portion.