Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { ProgressBar } from '@bigbang/ui';- Source
- ProgressBar.tsx
- Storybook
- ProgressBar · Playground
ProgressBar is in the @bigbang/ui package.
import { ProgressBar } from '@bigbang/ui';
<ProgressBar label="Uploading file" value={progress} description="About 2 minutes left" />;labelRequired- Description
- What is in progress, such as "Dosya yükleniyor". Always given; hide it with
hideLabelwhen the context shows it. - Type
string
value- Description
- Progress from 0 to
max. Leave it out, or passnull, when the remaining time is unknown: the bar then sweeps. - Type
number | null
max- Description
- The value at completion.
- Type
number- Default
100
showValue- Description
- Shows the value as a percentage in the Provider's locale ("%40" or "40%"). Not shown while indeterminate.
- Type
boolean- Default
true
valueText- Description
- Spoken value instead of the percentage, such as "10 dosyadan 3'ü".
- Type
string
description- Description
- One line under the bar, such as the remaining time; linked as the bar's description.
- Type
ReactNode
size- Description
- Thickness: 4 or 8 px.
- Type
'sm' | 'md'- Default
'sm'
tone- Description
- Fill colour: the brand action colour, or a status colour when the outcome is known;
warningfor a quota near its limit. - Type
'brand' | 'success' | 'warning' | 'danger'- Default
'brand'
hideLabel- Description
- Hides the label and the value visually; screen readers still read them.
- Type
boolean- Default
false
Data attributes
Section titled “Data attributes”data-component="progress-bar"anddata-tone: on the root.data-part="fill": the fill.data-indeterminate,data-progressing,data-complete: from Base UI.