Skip to content
Iryx UI

Feedback

IProgress ​

A determinate bar for work with a known end, with an indeterminate mode and a stacked mode.

Label and value ​

label renders above the track and is tied to the bar with aria-labelledby. showValue adds the percentage on the right.

Storage used62%

Formatting the value ​

formatValue receives the value and the max, so the readout can say something more useful than a percentage.

Storage used6.2 of 10 GB

Variants ​

Sizes ​

Indeterminate ​

Set indeterminate, or leave the model null, when the work has no measurable end. The bar animates without claiming a position.

Importing

Stacked ​

segments breaks one track into runs — storage by file type, a budget by category, a release by status. Each run carries its own value and variant, and modelValue is ignored; the accessible value is their sum.

Storage385 GB
  • Documents180 GB
  • Images120 GB
  • Video60 GB
  • Other25 GB

A run with a label gets a legend row beneath the track, which is where the breakdown is readable. Leave the labels off for a bare stacked bar.

A run with no variant takes the neutral fill.

More than the track holds ​

Runs can sum past max — a disk that grew, a budget overspent. They are clamped cumulatively rather than scaled, so the bar fills and stops.

Budget100%
  • Committed70%
  • Requested55%

The legend still shows each run's own value, so the overspend stays readable as a number.

Props ​

PropTypeDefaultDescription
modelValuenumber | null—Current value; null means indeterminate
maxnumber100Value representing full
variant'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral''primary'Bar colour
segmentsProgressSegment[]—Runs sharing one track; supersedes modelValue
size'sm' | 'md' | 'lg''md'Track thickness
indeterminatebooleanfalseAnimate without a position
labelstring—Text above the track, wired to the bar
showValuebooleanfalseShow the readout on the right
formatValue(value, max) => stringpercentageFormats that readout
unstyledboolean—Drop built-in classes
classstring—Merged with the built-in classes
ui{ root?, header?, label?, value?, track?, indicator?, segment?, legend?, legendItem?, legendSwatch?, legendValue? }—Per-slot class overrides

The value is clamped to 0…max.

ts
interface ProgressSegment {
  value: number
  label?: string
  variant?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'
}

With no label, put an aria-label on the component: attributes reach the progressbar itself.

For a trend rather than a proportion, use ISparkline; for a wait inside a button, IButton's loading.