# 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.

```ts
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.

## Examples

```tsx
<Meter>
	<Meter.Indicator value={45} max={100} aria-label={t("storage.used")} />
	<Meter.ValueLabel>{t("storage.percent", { value: 45 })}</Meter.ValueLabel>
</Meter>
```

## Props

Also accepts everything in `TagProps<"div">`.


### Meter.Indicator

Renders 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.

| 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

Renders 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.

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. |