Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Progress Bar

A Progress Bar communicates the completion status of a process or task.

Version 1.1.0
Github
Storybook

Installation

Installation page anchor
yarn add @twilio-paste/progress-bar - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {ProgressBar, ProgressBarLabel} from '@twilio-paste/core/progress-bar';
import {Box} from '@twilio-paste/core/box';
import {HelpText} from '@twilio-paste/core/help-text';
import {useUID} from '@twilio-paste/core/uid-library';

const AlertDialogExample = () => {
  const progressBarId = useUID();
  const helpTextId = useUID();

  return (
    <Box>
      <ProgressBarLabel htmlFor={progressBarId}>Downloading more RAM</ProgressBarLabel>
      <ProgressBar id={progressBarId} aria-describedby={helpTextId} isIndeterminate />
      <HelpText id={helpTextId}>Increasing your RAM helps your computer run faster.</HelpText>
    </Box>
  );
};

Props

Props page anchor

ProgressBar

ProgressBar page anchor

aria-describedby

Id of the HelpText that describes the ProgressBar.

Type
string

aria-label

If not using a ProgressBarLabel, you can provide a custom aria-label to describe the ProgressBar.

Type
string

aria-labelledby

If not using a ProgressBarLabel, you can use a custom label with aria-labelledby to describe the ProgressBar.

Type
string

disabled

Sets the ProgressBar to an disabled state.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_BAR'

formatOptions

Used to adjust how the numbers are rendered and interpreted. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

Type
NumberFormatOptions

hasError

Sets the ProgressBar to an error state.

Type
boolean

id

Id of the ProgressBar. Used for the ProgressBarLabel's htmlFor prop.

Type
string

isIndeterminate

Sets the ProgressBar to an indeterminate state.

Type
boolean

maxValue

Maximum value of the ProgressBar.

Type
number
Default
100

minValue

Minimum value of the ProgressBar.

Type
never
Default
0

value

The current value of the ProgressBar.

Type
number
Default
0

valueLabel

Screen reader only: used to describe the current value of the ProgressBar in plain text.

Type
string

ProgressBarLabel

ProgressBarLabel page anchor

htmlFor RequiredRequired

The id of the ProgressBarLabel's associated ProgressBar.

Type
string

disabled

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'PROGRESS_BAR_LABEL'

valueLabel

Custom label text for the current value of the ProgressBar.

Type
string