Orbit

A compact chip that communicates the state of a record. Styling is closed: there is no className escape hatch, and the chip sizes to its content.

Colors

Six color treatments map to common lifecycle states. Each resolves a light and dark variant.

Succeeded
Failed
Pending
Processing
Scheduled
Archived
<Status status="Succeeded" color="green" />
<Status status="Failed" color="red" />
<Status status="Pending" color="yellow" />
<Status status="Processing" color="blue" />
<Status status="Scheduled" color="purple" />
<Status status="Archived" color="gray" />

Neutral

Omit color for a color-less chip that inherits the surrounding text and surface.

Draft
<Status status="Draft" />

Sizes

Two sizes scale the padding and text relative to the chip content.

Succeeded
Succeeded
<Status status="Succeeded" color="green" size="small" />
<Status status="Succeeded" color="green" size="medium" />

Props

Status has no className prop. Use color and size to control its appearance.

status

string

required

The label rendered inside the chip.

Applies a predefined color treatment. Omit for a neutral, color-less chip.

size

"small" | "medium"default: 'medium'

Controls padding and text size.