Badge

Status badges communicate the current lifecycle state of content items. Each status has a unique color and label.

All Statuses

EmptyGeneratedIn ReviewApprovedScheduledPublishedRejectedArchived

tsx

<Badge status="empty" />
<Badge status="generated" />
<Badge status="in_review" />
<Badge status="approved" />
<Badge status="scheduled" />
<Badge status="published" />
<Badge status="rejected" />
<Badge status="archived" />

Interactive Demo

Click a status below to cycle through the content lifecycle.

Empty

tsx

const [status, setStatus] = useState<Status>("empty");

<Badge status={status} />

<button onClick={() => setStatus("approved")}>
  Approve
</button>

Props

Prop	Type	Default	Description	Required
status	`"empty" \| "generated" \| "in_review" \| "approved" \| "scheduled" \| "published" \| "rejected" \| "archived"`	-	Current lifecycle status to display	No

Usage Guidelines

Each content item should display exactly one badge at a time.
Use the color-coded dot to reinforce status at a glance.
Badges are read-only indicators; do not use them as buttons.
When listing content, badges should be right-aligned in table rows for scannability.