@xsolla/xui-progress-bar

Themed progress bar with label, helper text, and error/success states.

Installation

yarn add @xsolla/xui-progress-bar

Usage

import { ProgressBar } from '@xsolla/xui-progress-bar';

<ProgressBar percent={65} label="Uploading..." helperText="65% complete" />

Props

ProgressBar

| Prop | Type | Default | Description | |------|------|---------|-------------| | percent | number | 0 | Progress value from 0 to 100 | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Size of the progress bar | | state | "default" \| "success" \| "error" | "default" | Visual state affecting bar colour | | label | string | — | Label text displayed above the bar | | helperText | string | — | Helper text displayed below the bar | | errorMessage | string | — | Error text shown when state is "error" | | labelIcon | React.ReactNode | — | Icon displayed alongside the label | | statusIcon | React.ReactNode | — | Icon displayed at the right of the label row |