Orbit

A small rounded label for tags, counts and inline metadata. Color is required.

Colors

Six color treatments. Each resolves a light and dark variant automatically.

GrayBluePurpleYellowRedGreen
<Pill color="gray">Gray</Pill>
<Pill color="blue">Blue</Pill>
<Pill color="purple">Purple</Pill>
<Pill color="yellow">Yellow</Pill>
<Pill color="red">Red</Pill>
<Pill color="green">Green</Pill>

Usage

Pair a color with a concise label to convey state at a glance.

ActivePendingFailed
<Pill color="green">Active</Pill>
<Pill color="yellow">Pending</Pill>
<Pill color="red">Failed</Pill>

Props

children

ReactNode

required

Pill content, typically a short label.

color

PillColor

required

Color treatment of the pill. There is no default.

className

string

Classes merged onto the pill element.