Progress.md

id	Progress
section	components
cssPrefix	pf-v6-c-progress
propComponents	Progress

import { useState } from 'react';

Examples

Basic

Small

Large

Outside

Inside

Single line

Without measure

Finite step

Progress with step instructions

Truncate title

Title outside of progress bar

Helper text

Status examples

When conveying status, you should ensure:

• There is visible helper text that explains the status.
• The helper text includes the status icon, as seen in our basic helper text example.
• The helper text is linked to the <Progress> component via the aria-describedby property, as seen in the progress helper text example.

Success

Failure

Warning

Interactive status icon and measure location