# Meter

- Page: <https://kznlabs.github.io/labsUI/components/meter>

## Meter (`meter`, component)

Server-safe gauge for a value in a known range (storage, quota, server load, password strength). Colors by <meter> thresholds, or stacked segments with a legend, like a storage bar.

- Install: `npx @kznlabs/labsui add meter`
- Docs: <https://kznlabs.github.io/labsUI/components/meter>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Meter>`: A measurement within a known range (disk, quota, server load, password strength), not a
task's progress (use Progress). Colors follow <meter>: green in the optimum region, orange one
region away, red two away.
  - `high?: number` = `max`: Above this the value is high.
  - `label?: ReactNode`: Visible name above the bar; also the accessible name.
  - `low?: number` = `min`: <meter> thresholds: below `low` is low, above `high` is high.
  - `max?: number` = `100`: Upper bound.
  - `min?: number` = `0`: Lower bound.
  - `optimum?: number` = `(min + max) / 2`: Where good is: below low, between, or above high. Decides the color, like <meter>.
  - `segments?: Segment[]`: Stacked parts with a legend (like a storage bar). Overrides the threshold color.
  - `value?: number`: Total used. With `segments`, defaults to their sum.
  - `valueText?: string`: Text on the right and the accessible value, e.g. "48 GB of 100 GB".

- `type Segment = { label: string; value: number; className?: string; }`

### Usage

```tsx
<Meter label="Storage" valueText="71 GB of 100 GB" segments={[{ label: "Clips", value: 48 }, { label: "Backups", value: 14 }]} />
```

### Example: storage.tsx

```tsx
import { Meter } from "@/components/ui/meter";

export function Storage() {
  return (
    <Meter
      label="Clip storage"
      valueText="71 GB of 100 GB"
      segments={[
        { label: "Clips", value: 48 },
        { label: "Thumbnails", value: 9 },
        { label: "Backups", value: 14 },
      ]}
    />
  );
}
```