# Progress: Status

> `variant` colors only the fill or ring, so the track, label and value stay neutral.

Example: https://hextaui.com/docs/progress/examples/variants
Component docs: https://hextaui.com/docs/progress.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/progress-variants.json
```

This adds `components/examples/progress/variants.tsx` with the Progress component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/progress/variants.tsx"
import {
  Progress,
  ProgressCircle,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

export function ProgressVariants() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Progress value={100} variant="success">
        <ProgressLabel>Backup complete</ProgressLabel>
        <ProgressValue />
      </Progress>
      <Progress value={86} variant="warning">
        <ProgressLabel>Storage almost full</ProgressLabel>
        <ProgressValue />
      </Progress>
      <Progress value={47} variant="destructive">
        <ProgressLabel>Upload failed</ProgressLabel>
        <ProgressValue />
      </Progress>
      <div className="flex items-center gap-4">
        <ProgressCircle value={100} variant="success" aria-label="Synced" />
        <ProgressCircle value={86} variant="warning" aria-label="Almost full" />
        <ProgressCircle value={47} variant="destructive" aria-label="Failed" />
      </div>
    </div>
  )
}
```

## Props in this example

### Progress

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | null makes the bar indeterminate. |
| `variant` | `"default" \| "success" \| "warning" \| "destructive"` | `"default"` |  |

### ProgressCircle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number \| null` | – | null spins an arc. |
| `variant` | `"default" \| "success" \| "warning" \| "destructive"` | `"default"` |  |

## More Progress examples

- [Sizes](https://hextaui.com/docs/progress/examples/sizes.md)
- [Segments](https://hextaui.com/docs/progress/examples/segments.md)
- [Indeterminate](https://hextaui.com/docs/progress/examples/indeterminate.md)
- [Circle](https://hextaui.com/docs/progress/examples/circle.md)
- [Indeterminate circle](https://hextaui.com/docs/progress/examples/circle-indeterminate.md)
- [Custom range and format](https://hextaui.com/docs/progress/examples/format.md)
- [Animated value](https://hextaui.com/docs/progress/examples/number-flow.md)
- [Long labels](https://hextaui.com/docs/progress/examples/files.md)
- [Without a visible label](https://hextaui.com/docs/progress/examples/unlabeled.md)
- [Right to left](https://hextaui.com/docs/progress/examples/rtl.md)