StageBar

The segmented pipeline bar from Attio's Deal-stage Highlight: one segment per stage, each tinted with its stage colour, the current stage at full strength. Reports its state via role="progressbar".

Preview

Usage

import { StageBar } from "crisp";

<StageBar
  stages={[
    { label: "Lead", color: "#266df0" },
    { label: "In Progress", color: "#e0518f" },
    { label: "Won", color: "#22a565" },
  ]}
  current="Won"
  aria-label="Deal stage"
/>;

current is the stage index or a matching label. Each stage's color defaults to the brand colour.