# Progress: Segments

> Pass `segments` to split the fill into parts, such as passed, failed and skipped tests. Each part eases on its own and pushes the parts after it, and their labels are read out with the value.

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

## Add this example

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

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

## Source

```tsx title="components/examples/progress/segments.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"

const total = 48

export function ProgressSegments() {
  const [counts, setCounts] = React.useState({ passed: 29, failed: 2, skipped: 1 })
  const done = counts.passed + counts.failed + counts.skipped

  return (
    <div className="flex w-full max-w-sm flex-col items-center gap-6">
      <Progress
        max={total}
        segments={[
          { value: counts.passed, variant: "success", label: "passed" },
          { value: counts.failed, variant: "destructive", label: "failed" },
          { value: counts.skipped, variant: "warning", label: "skipped" },
        ]}
      >
        <ProgressLabel>Running tests</ProgressLabel>
        <ProgressValue>{() => `${done} of ${total}`}</ProgressValue>
      </Progress>
      <div className="flex flex-wrap justify-center gap-2">
        <Button
          variant="outline"
          size="sm"
          disabled={done >= total}
          onClick={() =>
            setCounts((current) => ({ ...current, passed: current.passed + 1 }))
          }
        >
          Pass one
        </Button>
        <Button
          variant="outline"
          size="sm"
          disabled={done >= total}
          onClick={() =>
            setCounts((current) => ({ ...current, failed: current.failed + 1 }))
          }
        >
          Fail one
        </Button>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => setCounts({ passed: 0, failed: 0, skipped: 0 })}
        >
          Reset
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### Progress

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `max` | `number` | `100` |  |
| `segments` | `{ value: number; variant?: ProgressVariant; label?: string }[]` | – | Splits the fill into parts. Their sum becomes the value. |

## More Progress examples

- [Sizes](https://hextaui.com/docs/progress/examples/sizes.md)
- [Status](https://hextaui.com/docs/progress/examples/variants.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)