Progress

Variants

With label and value

UPLOAD72%

Sizes

Indeterminate

When the amount is not known, leave value out. The bar draws a full-width hatched fill that slides gently to the right, so it is never mistaken for an empty bar (0%) or a full one (100%). With reduced motion, and in forced colors, the hatch stays still. The blocks variant shows the same idea as a row of hatched cells that slides the same way.

SYNCING—

Props

Values clamp to 0–max. A zero, negative, or non-finite max becomes 100. Omitted or non-finite value is indeterminate.

PROP	TYPE	DEFAULT	REQUIRED
`value` Current progress, clamped from 0 to max. Omit or pass a non-finite value for an indeterminate (amount unknown) state: a full-width hatched fill that slides gently and stays a still hatch with reduced motion and in forced colors, so it never looks like 0% or 100%.	`number`	—	no
`max` Finite positive upper bound. Zero, negative, and non-finite values fall back to 100.	`number`	`100`	no
`label` Optional short progress heading, displayed uppercase. Long identifiers wrap beside the value.	`string`	—	no
`showValue`	`boolean`	`false`	no
`variant`	`enum` bar \| blocks	`"bar"`	no
`size`	`enum` sm \| md	`"md"`	no

Accessibility

progressbar role with value and bounds. Indeterminate progress omits aria-valuenow.
Set label or aria-label; the default name is “Progress”.
Block glyphs are aria-hidden; ARIA attributes convey progress.
The hatch of an unknown amount stops sliding with reduced motion and in forced colors; it stays drawn.
In forced colors (high contrast) the fill and the hatch are drawn in the system text color, so the value and the unknown state stay visible against the track's outline.
A bar takes the width of its container, in a row as in a block. A long label wraps beside the value instead of pushing it out.

Manifest entry

<Progress value={72} showValue />

View agent manifest

{
  "description": "Determinate or indeterminate progress indicator rendered as a filled bar or a row of block glyphs. It fills the width its container gives it.",
  "props": {
    "value": {
      "type": "number",
      "description": "Current progress, clamped from 0 to max. Omit or pass a non-finite value for an indeterminate (amount unknown) state: a full-width hatched fill that slides gently and stays a still hatch with reduced motion and in forced colors, so it never looks like 0% or 100%."
    },
    "max": {
      "type": "number",
      "default": 100,
      "description": "Finite positive upper bound. Zero, negative, and non-finite values fall back to 100."
    },
    "label": {
      "type": "string",
      "description": "Optional short progress heading, displayed uppercase. Long identifiers wrap beside the value."
    },
    "showValue": {
      "type": "boolean",
      "default": false
    },
    "variant": {
      "type": "enum",
      "values": [
        "bar",
        "blocks"
      ],
      "default": "bar"
    },
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md"
      ],
      "default": "md"
    }
  },
  "composable_with": [
    "Card",
    "Field"
  ],
  "never_inside": [
    "Progress"
  ],
  "example": "<Progress value={72} showValue />"
}