Progress

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<Progress> <Progress.Bar percentage={75} accessibilityLabel="Progress bar" /> </Progress>

<Progress>
  <Progress.Bar percentage={75} accessibilityLabel="Progress bar" />
</Progress>

Introduction

import { Progress } from '@telus-uds/ds-allium'

Progress component is a container for displaying one or several Progress.Bars.

Accessibility

Both Progress and its child Progress.Bar components accept the standard React Native accessibility props, but these usually don't need to be provided.

The crucial accessibility props are set within Progress.Bar, and defaults are automatically provided as follows:

• accessibilityRole (role): progressbar,
• accessibilityValue.min (aria-valuemin): 0,
• accessibilityValue.max (aria-valuemax): 100,
• accessibilityValue.now (aria-valuenow): percentage,
• accessibilityValue.text (aria-valuetext): %{percentage}%

If necessary, these may be overridden by passing these props to Progress.Bar, but for the majority of cases, it automatically generates the expected values for assistive technology to correctly describe the progress bar's current state.

Platform considerations

The component is available on both native platforms and web.

However, keep in mind that appearance may slightly differ among platforms.

Props

Progress

Name	Type	Default	Description
children*	node		Use the 'children' prop to supply one or several 'ProgressBar's.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details

Progress.Bar

Name	Type	Default	Description
percentage	number		Percentage of completion.
tokens	custom		System tokens prop, see tokens for more details
variant	variantProp		System variant prop, see variants for more details

Variants

• Use { size: 'mini' } in the variant prop of the Progress component for a narrower progress bar container.
• Use { inactive: true } in the variant prop of the Progress.Bar component for a filling corresponding to the disabled state.
• { negative: true } variant of the Progress.Bar component for negative / secondary filling.

Loading...

<Progress variant={{ size: 'mini' }}> <Progress.Bar percentage={75} accessibilityLabel="Progress bar" /> <Progress.Bar percentage={50} accessibilityLabel="Negative progress bar" variant={{ negative: true }} /> <Progress.Bar percentage={25} accessibilityLabel="Inactive progress bar" variant={{ inactive: true }} /> </Progress>

<Progress variant={{ size: 'mini' }}>
  <Progress.Bar percentage={75} accessibilityLabel="Progress bar" />
  <Progress.Bar
    percentage={50}
    accessibilityLabel="Negative progress bar"
    variant={{ negative: true }}
  />
  <Progress.Bar
    percentage={25}
    accessibilityLabel="Inactive progress bar"
    variant={{ inactive: true }}
  />
</Progress>

Figma

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support