Progress ​

Visually represents progress or completion of a task. Updates dynamically to give users clear feedback on status.

Examples ​

Progress

Hint ​

Progress40%

Intervals ​

Progress

Sizes ​

Progress - sm
Progress - md
Progress - lg
Progress - xl

API Reference ​

Show types
typescript
export interface ProgressProps {
  /** Current progress value */
  value: number

  /** Size of the progress bar: "sm" | "md" | "lg" | "xl" */
  size?: 'sm' | 'md' | 'lg' | 'xl'

  /** Optional text label displayed on the progress bar */
  label?: string

  /** Whether to show a hint/tooltip for the progress value */
  hint?: boolean

  /** Whether to show interval markers on the progress bar */
  intervals?: boolean

  /** Number of intervals to display if `intervals` is true */
  intervalCount?: number
}
Prop Default Type
value*
—
number

Current progress value

size
"sm"
"md" | "sm" | "lg" | "xl"

Size of the progress bar: "sm" | "md" | "lg" | "xl"

label
""
string

Optional text label displayed on the progress bar

hint
false
boolean

Whether to show a hint/tooltip for the progress value

intervals
false
boolean

Whether to show interval markers on the progress bar

intervalCount
6
number

Number of intervals to display if `intervals` is true

Slot Payload
hint
—

Custom content for the hint area (usually displays the progress value). If not provided, defaults to showing `props.value` followed by `%`.

PopoverRating