Progress Bar

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

Installation

yarn add @twilio-paste/progress-bar - or - yarn add @twilio-paste/core

Usage

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

ProgressBar

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: any
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

Inherited props

ProgressBarLabel

htmlFor RequiredRequired

The id of the ProgressBarLabel's associated ProgressBar.

Type: string

disabled

Type: any

element

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

Type: any
Default: 'PROGRESS_BAR_LABEL'

valueLabel

Custom label text for the current value of the ProgressBar.

Type: string