Meter
Shows a measurement inside a known range, like storage used, seats taken or password strength. For a task that moves toward done, like an upload, use Progress.
Installation
Set up Camaleo once (Installation), then import what you need. The skin you load styles it.
import { Meter } from "@camaleo/react";Anatomy
A root with a header (label and value) and a track with the fill. Every part has a data-slot you can target from CSS.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
Meter: how full something is
Progress: how far a task has gone
Meter or Progress?
Meter says how full something is, and the value can go up or down. Progress says how far a task has gone, and it only moves toward done.
Tones for status
brand when all is well, warning when it gets close to the limit, danger when people need to act. Say it in the text too, not only in color.
Warn before it's full
Click to add files. Pick the tone from the value, so the meter turns warning at 75% and danger when the mailbox is full.
In the real unit
Set max to the real limit and show "8,450 of 10,000". People think in users and gigabytes, not in percent.
Seats, in words
getAriaValueText lets screen readers say "7 of 10 seats used" instead of "70 percent".
A range that doesn't start at zero
Use min and max for scales like temperature. The fill shows where 24 °C sits between 16 and 32.
Storage
Files, photos and email share your 15 GB.
In a settings row
Put the meter next to the action that fixes it. "Free up space" right by the number saves people a search.
In context
Meters sit where people check their limits. These are whole pieces of UI you can copy, in the skin you picked.
Team seats
Your Pro plan includes 20 seats.
Create a password
Use at least 12 characters, with numbers and symbols.
Server resources
Guidelines
Disk space, seats, monthly emails: a value and a known maximum.
An upload is a task with an end. Use Progress, so screen readers announce a progress bar.
"85 of 100 connections" tells people how much room is left.
85 what? Percent, megabytes or users? People can't tell whether to worry.
Props
getAriaValueText so screen readers hear the same thing.Intl.NumberFormat when formatting the value.
Defaults to the user's runtime locale.min and max.Other Base UI meter root props and native <div> attributes pass through.
Styling hooks
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- It renders role="meter" with aria-valuenow, aria-valuemin and aria-valuemax, and the label as its accessible name.
- Screen readers hear the percentage by default. valueLabel only changes the visible text, so pass getAriaValueText with the same words.
- Tone is never the only signal: put the status ("Almost full") in the value text.
- Fills keep at least 3:1 contrast against the track in all 13 skins, light and dark.