Feedback
Progress
Ink fills by default, or the accent tone: progress is one of the accent's few uses, with focus rings and selection. Rings turn amber at 75% and red at 90%, always with the number beside them.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { Progress, ProgressRing } from "@nibapp/ui/components/progress";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
Progress
Linear progress for long-running tasks. Determinate fill or an indeterminate sliding sheen.
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "ink" | "accent" | "success" | "warning" | "danger" | "ink" | Ink by default. `accent` is a sanctioned blue micro-moment — use it for the hero task only. |
| size | "sm" | "md" | "lg" | "md" | |
| value (required) | number | null | — | Current value; `null` renders the indeterminate sheen. |
| label | ReactNode | — | Visible label, wired to the progressbar's accessible name. |
| showValue | boolean | false | Show the formatted value (e.g. "42%") opposite the label. |
Also takes the props of Base UI's Progress.Root, except children and value.
ProgressRing
Tiny circular meter for token / context-window usage. Escalates at warning & danger thresholds.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" |
|
| value (required) | number | — | |
| warningAt | number | 75 | Percentage at which the ring turns amber. |
| dangerAt | number | 90 | Percentage at which the ring turns red. |
| level | ProgressRingLevel | — | Force a level instead of deriving it from the thresholds. |
| showValue | boolean | false | Show the formatted value next to the ring — keeps the state legible without color. |
| aria-label (required) | string | — | Required accessible name, e.g. "Context window". |
Also takes ComponentProps<typeof Meter.Root>, except children and render.