When To Use
- Use Progress when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
- Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
- Review the examples below to understand the tradeoffs between density, emphasis, and behavior.
When Not To Use
- Do not use Progress just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
- Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.
Accessibility Notes
- Use semantic status text in addition to color or icon treatment so the message is understandable to everyone.
- Announce transient updates with a live region when the user does not move focus to the message directly.
- Keep dismissal and recovery actions accessible from the keyboard.
Key Props / API
Composition surface
Progress keeps the native HTML or Radix API surface, then layers in design-system styling and composition defaults.
Example Code
import { Progress } from "@hilum/ui"
<Progress value={65} />Progress
Default
Linear progress indicator
Uploading voice samples...65%