Components
HorizontalBar
Horizontal progress bar for displaying progress
Overview
HorizontalBar is a horizontal progress bar. role="progressbar" and ARIA attributes are applied by default.
- Animated — Fill width transitions with CSS animation
- Accessible —
aria-valuenow,aria-valuemin,aria-valuemaxapplied - Customizable — Height, color, and border radius are adjustable
Basic Usage
Customization
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | required | Current value (clamped to min/max range) |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
height | number | 8 | Bar height (px) |
radius | number | 999 | border-radius (px) |
fillColor | string | var(--background-brand-default) | Fill color |
trackColor | string | var(--background-default-tertiary) | Track background color |
isAnimated | boolean | true | CSS transition animation |
trackStyle | CSSProperties | — | Additional track styles |
fillStyle | CSSProperties | — | Additional fill styles |
ariaLabel | string | 'Progress' | Accessibility label |
Guidelines
valueis automatically clamped to the min/max range- Use DonutChart for comparing ratios of multiple items; use HorizontalBar for single progress indicators