crispmeasured from Attio

Progress

A brand-filled progress bar, continuous or segmented (the "Getting started 3/6" step bar).

A progress indicator in two shapes: a continuous brand fill, or a segmented row of pills — Attio's "Getting started 3/6" step bar. Reports its state via role="progressbar" and the ARIA value attributes.

Preview

Usage

import { Progress } from "crisp";

<Progress value={64} aria-label="Upload" />
<Progress value={3} max={6} segments={6} aria-label="Getting started" />

API

PropTypeDefaultDescription
valuenumberCurrent value.
maxnumber100Maximum value.
segmentsnumberRender as N discrete steps instead of a continuous fill.

On this page