# Progress

> How far a task has got, as a bar.

- **Level**: atom · **Status**: stable · **Role**: status
- **Import**: `import { Progress } from "@rrios-forge/ui/atoms/progress";`
- **Source**: `packages/ui/src/atoms/progress`

Semantic progress bar. Composes `@radix-ui/react-progress` for the ARIA contract (`role="progressbar"`, `aria-valuenow` / `aria-valuemin` / `aria-valuemax`). `value={null}` flips to the indeterminate state. `tone` reinforces meaning when the progress represents a specific state (success / warning / danger).

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-atoms-progress--playground) · frame: `/iframe.html?id=components-atoms-progress--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-progress--sizes) · frame: `/iframe.html?id=components-atoms-progress--sizes&viewMode=story`
- [Tones](/?path=/story/components-atoms-progress--tones) · frame: `/iframe.html?id=components-atoms-progress--tones&viewMode=story`
- [Indeterminate](/?path=/story/components-atoms-progress--indeterminate) · frame: `/iframe.html?id=components-atoms-progress--indeterminate&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).