Skip to content
Cimpress UI

Progress bar API

Usage guidelinesAPI

Import

Section titled “Import”
import { ProgressBar } from '@cimpress-ui/react';

Accessibility notes

Section titled “Accessibility notes”

ProgressBar requires a textual label to remain accessible to assistive technologies. See our accessibility guide for more details.

Non-percentage values

Section titled “Non-percentage values”

By default, progress bar operates on percentages, and it expects its value prop to be between 0 and 100. If your data has a different range of allowed values, you don’t need to recalculate it manually - provide the upper limit to the maxValue prop instead, and the progress bar will handle the calculation for you. Note that the progress bar will still display the value as a percentage, unless you override it through the valueLabel prop.

Shipments delivered
4 of 20

API reference

Section titled “API reference”

ProgressBar

Section titled “ProgressBar”

Visualizes the progress of an operation.

See progress bar usage guidelines.

ref
Section titled “ ref ”
Ref<HTMLDivElement>

The ref type for this component.

ProgressBarProps
tone
Section titled “ tone ”
'success' | 'base' | 'warning' | 'critical'

The tone of the progress bar.

Defaults to 'base' .
showValue
Section titled “ showValue ”
boolean

Whether the value of the progress bar should be displayed above it.

Defaults to true .
description
Section titled “ description ”
string

A description for the progress bar.

id
Section titled “ id ”
string

The element's unique identifier. See MDN.

data-cim-style-root
Section titled “ data-cim-style-root ”
boolean

Use this attribute to "claim" the component tree for exclusive Cimpress UI usage.

UNSAFE_className
Section titled “ UNSAFE_className ”
string

Sets the CSS className for the element. Only use as a last resort. Use style props instead.

See styling guide.

UNSAFE_style
Section titled “ UNSAFE_style ”
CSSProperties

Sets the CSS style for the element. Only use as a last resort. Use style props instead.

See styling guide.

label
Section titled “ label ”
string

The content to display as the label.

aria-label
Section titled “ aria-label ”
string

Defines a string value that labels the current element.

aria-labelledby
Section titled “ aria-labelledby ”
string

Identifies the element (or elements) that labels the current element.

aria-describedby
Section titled “ aria-describedby ”
string

Identifies the element (or elements) that describes the object.

aria-details
Section titled “ aria-details ”
string

Identifies the element (or elements) that provide a detailed, extended description for the object.

value
Section titled “ value ”
number

The current value (controlled).

Defaults to 0 .
maxValue
Section titled “ maxValue ”
number

The largest value allowed for the input.

Defaults to 100 .
valueLabel
Section titled “ valueLabel ”
ReactNode

The content to display as the value's label (e.g. 1 of 4).

StyleProps
margin
Section titled “ margin ”
Responsive<Spacing | "auto">

The amount of margin applied to all edges of this component.

marginX
Section titled “ marginX ”
Responsive<Spacing | "auto">

The amount of margin applied to the left and right edges of this component. Takes priority over margin.

marginY
Section titled “ marginY ”
Responsive<Spacing | "auto">

The amount of margin applied to the top and bottom edges of this component. Takes priority over margin.

marginTop
Section titled “ marginTop ”
Responsive<Spacing | "auto">

The amount of margin applied to the top edge of this component. Takes priority over marginY and margin.

marginRight
Section titled “ marginRight ”
Responsive<Spacing | "auto">

The amount of margin applied to the right edge of this component. Takes priority over marginX and margin.

marginBottom
Section titled “ marginBottom ”
Responsive<Spacing | "auto">

The amount of margin applied to the bottom edge of this component. Takes priority over marginY and margin.

marginLeft
Section titled “ marginLeft ”
Responsive<Spacing | "auto">

The amount of margin applied to the left edge of this component. Takes priority over marginX and margin.