1 viewer
Component · Feedback
Progress
Progress indicator with accessible range semantics.
- Category
- Feedback
- Slots
- 6
- States
- 3
- Writer
- Shared
Preview
<Progress label="HyperDB Graph Indexing" max={100} value={84} />Variants
Anatomy
The named parts of the rendered markup. Recipes style these hooks, and every renderer keeps them stable.
| Slot | DOM class |
|---|---|
| root | .primitive-progress |
| header | .primitive-progress__header |
| label | .primitive-progress__label |
| percent | .primitive-progress__percent |
| track | .primitive-progress__track |
| fill | .primitive-progress__fill |
- Modifier
- primitive-progress--{state}
- State attribute
- data-statefrom the state prop
- Role
- progressbar
States and platforms
The states the contract publishes, the platforms it declares, and the style recipes that dress it.
States
Platforms
Recipes
Renderers
Every tag in the example above renders through a shared writer.
Declared adapters. A status is the manifest's declaration, not a measured parity result.
| Target | Renderer | Status |
|---|---|---|
| web | react | experimental |
| runtime-node | view-node | ready |
| ssr | html-semantic | ready |
| terminal | terminal-text | planned |
| native | native-adapter | experimental |
Accessibility
Exposes progressbar semantics, value bounds, and indeterminate state without relying on recipe styling.
- Determinate progress exposes value, min, and max to assistive tech.
- Indeterminate progress omits aria-valuenow while preserving an accessible name.