Progress

Library

UDS Base

Repository

github.com/telus/universal-design-system

Package

npmjs.com/package/@telus-uds/components-base

Package version

1.6.1

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/components-base'

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.

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
children	node	null	Optional children that can be used to customize the progress bar filling.
percentage	number	0	Percentage of completion.
accessibilityLabel*	string		Accessibility label for the progress bar.
tokens	custom		System tokens prop, see tokens for more details
variant	objectOf		System variant prop, see variants for more details