Usage Bar
Compact quota, readiness, and capacity meter with automatic threshold tones.
Molecule
Progress · Metrics
When To Use
- Use Usage Bar when you need a reusable molecules 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 Usage Bar 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
- Keep headings, labels, and supporting text in the DOM before decorative chrome so the page reads well without styles or scripts.
- Test the pattern with keyboard navigation and a screen reader before treating the visual layout as complete.
- Use status, selection, and disabled states that remain understandable without color alone.
Key Props / API
Props
label, value, max, percent, valueLabel, showPercent
Example Code
import { UsageBar } from "@hilum/ui"
<UsageBar label="Products" value={430} max={500} />
<UsageBar label="Orders / month" value={6200} max={10000} />
<UsageBar label="Bandwidth (GB)" value={82} max={100} />Usage Bar · Stacked
Quota meters
Label, value, max, and inferred warning tones
Products430 / 500
Orders / month6,200 / 10,000
Bandwidth (GB)82 / 100
Usage Bar · Readiness
Explicit tone
Use tone when the metric is good as it increases
Readiness82 / 100
Usage Bar · Inline
Dense rows
Compact layout for table cells and list rows
64%
78%
94%