Status Lifecycle

A complete status enum with associated colors, a state machine diagram, and usage guidelines for the content pipeline.

Status Badges

DraftIn ReviewApprovedScheduledPublishedRejectedArchived

State Machine Diagram

Content moves through these states in the pipeline. The diagram below shows valid transitions.

Draft

In Review

Approved

Scheduled

Published

Archived

Rejection path:

In Review

Rejected

Draft

(revision cycle)

Valid Transitions

From	To
Draft	In Review
In Review	Approved
In Review	Rejected
Approved	Scheduled
Scheduled	Published
Published	Archived
Rejected	Draft

Color Reference

Prop	Type	Default	Description	Required
draft	`status`	#525252	Background: #f5f5f5, Border: #e5e5e5, Text: #525252	No
in_review	`status`	#2563eb	Background: #eff6ff, Border: #bfdbfe, Text: #2563eb	No
approved	`status`	#16a34a	Background: #f0fdf4, Border: #bbf7d0, Text: #16a34a	No
scheduled	`status`	#1db954	Background: #faf5ff, Border: #ddd6fe, Text: #1db954	No
published	`status`	#059669	Background: #ecfdf5, Border: #a7f3d0, Text: #059669	No
rejected	`status`	#dc2626	Background: #fef2f2, Border: #fecaca, Text: #dc2626	No
archived	`status`	#a3a3a3	Background: #f5f5f5, Border: #e5e5e5, Text: #a3a3a3	No

TypeScript Enum

enum ContentStatus {
  Draft = "draft",
  InReview = "in_review",
  Approved = "approved",
  Scheduled = "scheduled",
  Published = "published",
  Rejected = "rejected",
  Archived = "archived",
}

const STATUS_CONFIG: Record<ContentStatus, {
  label: string;
  bg: string;
  color: string;
  border: string;
}> = {
  [ContentStatus.Draft]: {
    label: "Draft",
    bg: "#f5f5f5",
    color: "#525252",
    border: "#e5e5e5",
  },
  [ContentStatus.InReview]: {
    label: "In Review",
    bg: "#eff6ff",
    color: "#2563eb",
    border: "#bfdbfe",
  },
  [ContentStatus.Approved]: {
    label: "Approved",
    bg: "#f0fdf4",
    color: "#16a34a",
    border: "#bbf7d0",
  },
  [ContentStatus.Scheduled]: {
    label: "Scheduled",
    bg: "#faf5ff",
    color: "#1db954",
    border: "#ddd6fe",
  },
  [ContentStatus.Published]: {
    label: "Published",
    bg: "#ecfdf5",
    color: "#059669",
    border: "#a7f3d0",
  },
  [ContentStatus.Rejected]: {
    label: "Rejected",
    bg: "#fef2f2",
    color: "#dc2626",
    border: "#fecaca",
  },
  [ContentStatus.Archived]: {
    label: "Archived",
    bg: "#f5f5f5",
    color: "#a3a3a3",
    border: "#e5e5e5",
  },
};

Usage in Content Pipeline

tsx

function StatusBadge({ status }: { status: ContentStatus }) {
  const config = STATUS_CONFIG[status];
  return (
    <span style={{
      padding: "6px 14px",
      borderRadius: 999,
      fontSize: 13,
      fontWeight: 600,
      color: config.color,
      background: config.bg,
      border: `1px solid ${config.border}`,
    }}>
      {config.label}
    </span>
  );
}

Guidelines

Always use the STATUS_CONFIG lookup for consistent colors across the app.
Only allow transitions defined in the state machine -- validate server-side.
Rejected content should return to Draft for revision, not skip to Approved.
Archived is a terminal state -- content cannot be un-archived.
Use pill-shaped badges (border-radius: 999) for status indicators.