Real World Example

E-commerce apps (Flipkart, Amazon, Myntra) show a coloured badge for each order status. A literal union lists every allowed status, so a typo like "SHIPED" never reaches production.

Example

type OrderStatus = "PLACED" | "PACKED" | "SHIPPED" | "OUT_FOR_DELIVERY" | "DELIVERED" | "CANCELLED";
type BadgeColor = "grey" | "blue" | "orange" | "green" | "red";

function badge(status: OrderStatus): { text: string; color: BadgeColor } {
  switch (status) {
    case "PLACED":
    case "PACKED": return { text: "Processing", color: "grey" };
    case "SHIPPED": return { text: "Shipped", color: "blue" };
    case "OUT_FOR_DELIVERY": return { text: "Arriving today", color: "orange" };
    case "DELIVERED": return { text: "Delivered", color: "green" };
    case "CANCELLED": return { text: "Cancelled", color: "red" };
  }
}

const orders: [string, OrderStatus][] = [["OD-1", "PACKED"], ["OD-2", "OUT_FOR_DELIVERY"], ["OD-3", "CANCELLED"]];
for (const [id, status] of orders) {
  const b = badge(status);
  console.log(id.padEnd(5), b.text.padEnd(15), b.color);
}

Output

OD-1  Processing      grey
OD-2  Arriving today  orange
OD-3  Cancelled       red

Order Status Badges

Example