Stepwise UI

Chip

Pill-shaped label in six semantic colors and three variants - soft, solid, and outline. Add a leading dot for Live / Pending / Error-style statuses, or an icon for contextual labels.

Installation

npx stepwise-ui add chip

Soft

Tinted fill with coloured text - the default choice for inline status labels.
DangerWarningSuccessInfoMagicalIdle
<Chip color="danger"  variant="soft">Danger</Chip>
<Chip color="warning" variant="soft">Warning</Chip>
<Chip color="success" variant="soft">Success</Chip>
<Chip color="info"    variant="soft">Info</Chip>
<Chip color="magical" variant="soft">Magical</Chip>
<Chip color="idle"    variant="soft">Idle</Chip>

Solid

Saturated fill with white text - use for high-emphasis labels that need to stand out.
DangerWarningSuccessInfoMagicalIdle
<Chip color="danger"  variant="solid">Danger</Chip>
<Chip color="warning" variant="solid">Warning</Chip>
<Chip color="success" variant="solid">Success</Chip>
<Chip color="info"    variant="solid">Info</Chip>
<Chip color="magical" variant="solid">Magical</Chip>
<Chip color="idle"    variant="solid">Idle</Chip>

Outline

Transparent fill with a subtle hue-matched border - the lightest option.
DangerWarningSuccessInfoMagicalIdle
<Chip color="danger">Danger</Chip>
<Chip color="warning">Warning</Chip>
<Chip color="success">Success</Chip>
<Chip color="info">Info</Chip>
<Chip color="magical">Magical</Chip>
<Chip color="idle">Idle</Chip>

With icon

The icon prop accepts any React node and renders it to the left of the label.
BlockedActionClearUpdateDocsTimeout
BlockedActionClearUpdateDocsTimeout
<Chip color="success" variant="soft"    icon={<CloudSunny />}>Clear</Chip>
<Chip color="danger"  variant="outline" icon={<Warning2   />}>Blocked</Chip>

Dot

Pass dot for a leading status dot. Only the dot carries the semantic color - the chip body stays neutral so the dot reads as a pure signal.
LiveSyncingPendingErrorDraft
// only the dot is colored - body always uses neutral styling
<Chip color="success" variant="soft"    dot>Live</Chip>
<Chip color="info"    variant="outline" dot>Syncing</Chip>
<Chip color="warning" variant="soft"    dot>Pending</Chip>
<Chip color="danger"  variant="outline" dot>Error</Chip>

Usage

Common use case: status indicators in a list or table row.
Payment processedPaid
Server response slowDegraded
Build failedFailed
Syncing dataIn progress
// Status indicators in a list
<Chip color="success" dot>Paid</Chip>
<Chip color="warning" dot>Degraded</Chip>
<Chip color="danger"  dot>Failed</Chip>
<Chip color="info"    dot>In progress</Chip>

Sizes

Three sizes: sm, default, and lg.
DangerWarningSuccessInfoMagicalIdle
DangerWarningSuccessInfoMagicalIdle
DangerWarningSuccessInfoMagicalIdle
<Chip size="sm"      color="success">Success</Chip>
<Chip size="default" color="success">Success</Chip>
<Chip size="lg"      color="success">Success</Chip>

Props

PropTypeDescription
color
"danger" | "warning" | "success" | "info" | "magical" | "idle"
Semantic color. Default: "idle".
variant
"soft" | "solid" | "outline"
Visual style. Default: "outline".
size
"sm" | "default" | "lg"
20 / 24 / 28 px. Default: "default".
dot
boolean
Leading status dot in the chip's color.
icon
React.ReactNode
Optional left icon element.