Progress

The Progress component provides a flexible UI element for displaying progress indicators.

Usage

import { Progress } from '@harnessio/ui/components'

//...

return (
  <Progress value={0.75} state="processing" />
)

Variants

The Progress component supports the variant prop to indicate the type of progress being displayed. It accepts default and indeterminate values. This defines whether the progress is measurable or ongoing without a known completion percentage.

States

The Progress component supports the state prop to reflect the current status of the operation. It accepts completed, paused, failed, processing, and default values. This controls the visual feedback based on the progress state.

Colors

The Progress component supports a color prop that accepts a closed enum of palette themes — gray, blue, brown, cyan, green, forest-green, indigo, lime, mint, orange, pink, purple, red, violet, and yellow — matching the Tag theme set. The bar fill resolves to the corresponding design-system token (e.g. --cn-set-blue-primary-bg).

color and state are mutually exclusive — pass one or the other, never both. When color is set, the bar uses the chosen theme color, while the status icon falls back to the neutral default; use hideIcon if you want to remove the icon entirely. color works with both the default and indeterminate variants.

Sizes

The Progress component supports the size prop to adjust the height of the progress bar. It accepts sm, md, and lg values. This allows customization of the component’s visual size to fit different UI contexts.

API Reference

Prop	Required	Default	Type
variant	false	'default'	'default' | 'indeterminate'
value	false		number
state	false	'default'	'default' | 'processing' | 'completed' | 'paused' | 'failed'
color	false		'gray' | 'blue' | 'brown' | 'cyan' | 'green' | 'forest-green' | 'indigo' | 'lime' | 'mint' | 'orange' | 'pink' | 'purple' | 'red' | 'violet' | 'yellow'
size	false	'md'	'sm' | 'md' | 'lg'
label	false		string
description	false		string
subtitle	false		string
hidePercentage	false	false	boolean
hideIcon	false	false	boolean
id	false		string
className	false		string