ValueBadge
A small badge that shows a formatted value and keeps room for its longest value, so it never changes width.
import { ValueBadge } from "@butteryui/react";Demo
When to use it
Use it for
- The live value beside a slider's label (Slider shows one for you)
- A short measurement next to a control: 12px, 45°, 80%
- A value in a quiet row, with variant="outline"; one that has to stand out, with variant="solid"
Not for
- A record's state or a count: use StatusBadge
- An editable number: use NumberField
Examples
Badge looks
A value in each look, each keeping room for 100%: soft by default, solid to stand out, outline for a quiet row.
Percent badge
A percentage that never shifts its label as it grows from 0% to 100%.
Rotation badge
A label with its current value, sized for the widest value it can show.
Zoom control
A canvas zoom control: the badge keeps room for 200%, so the buttons beside it never move.
Variants and states
Steady width
It keeps room for -180° and 180°, so it doesn't jitter as the value changes.
Soft, solid and outline
Soft, the default, on bg-control; solid filled with text-secondary; outline, a 1px edge with no fill, for a quiet row. Each keeps its reserved width.
Props
ValueBadge
| Prop | Type | Default | Description |
|---|---|---|---|
reserve | readonly string[] | Values to keep room for, such as the formatted minimum and maximum, so the badge never changes width. | |
variant | "soft" | "solid" | "outline" | "soft" | "soft" (the default) on bg-control, "solid" filled with text-secondary under text in the surface's
color, or "outline", a 1px border edge with no fill, for a quiet row where a filled badge would be loud. |
It also takes ComponentPropsWithRef<"span">.
Accessibility
Plain text: give its control an aria-valuetext with the same value, as Slider does. The reserved widths are hidden from assistive technology.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It's --bt-h-badge (20px) tall and as wide as the longest of its value and its reserve values, with tabular digits, so it never changes width as the value moves; each variant keeps that size, the outline's edge drawn inside it. It stays on one line without truncating, and it takes no input, so it has no hit area.