Badges & status

Status communication: the generic Badge pill (color in, label as children — each domain owns its own status mapping), a time-series StatusRow, the Eyebrow kicker label, and the marketing PromoBadge pill.

Badge

zeyo-ui/badge — a colored pill with a small dot before the label (dot=false for no dot; plain for just the dot and label, no pill or outline), color + label text as children. It has no built-in status vocabulary; each domain owns its own status → color/label mapping and passes both in. See the order status mapping below for the pattern.

Every color

Error Info Neutral Purple Secondary Success Warning

No dot — dot={false}

Error Info Neutral Purple Secondary Success Warning

Dot and label, no pill — plain

Error Info Neutral Purple Secondary Success Warning

A real domain mapping — order status

Awaiting payment Paid Shipped Cancelled Refunded

Code

<Badge color="success">Active</Badge>
<Badge color="warning">Paused</Badge>
<Badge color="error">Failed</Badge>
<Badge color="info">Queued</Badge>
<Badge color="purple">Meeting</Badge>
<Badge color="secondary">Draft</Badge>
<Badge color="info" dot={false}>No dot</Badge>
<Badge color="success" plain>Dot and label, no pill</Badge>

Eyebrow

A small uppercase kicker label that sits above a heading.

Support ticket

Refund request #4821

Code

<Eyebrow>Support ticket</Eyebrow>
<Title level={4}>Refund request #4821</Title>

PromoBadge

apps/marketing's hero/section kicker pill — a gradient- or black-labeled chip plus a linked (or plain) caption. variant controls the light/dark container; labelColor picks the chip style, where gradient renders an animated Unicorn Studio scene on desktop (falling back to a static gradient on mobile or without WebGL). Not a status indicator — see Badge above for that. href takes a plain string (packages/ui has no $app/paths) — callers pass resolve(...) themselves.

New Find leads in minutes with AI

Pricing Pay only for what you use

Code

<PromoBadge label="New" variant="light">Find leads in minutes with AI</PromoBadge>
<PromoBadge href={resolve('/pricing')} label="Pricing" labelColor="black" variant="light"
  >Pay only for what you use</PromoBadge
>

StatusRow

A fixed-width row of status-colored segments with an optional tick axis — e.g. hourly send-health. Segments are clickable when onSelect is passed.

0:00 6:00 12:00 17:00 23:00

Code

<StatusRow
  slots={hourlyStatusMap}
  slotInterval={1}
  maxSlots={24}
  height={30}
  formatTick={(key) => `${key}:00`}
/>