ProductStatusBadge

Domain

Displays product lifecycle status with semantic colour coding.

Preview

DraftPublishedArchivedOut of Stock

Code

{(['DRAFT', 'PUBLISHED', 'ARCHIVED', 'OUT_OF_STOCK'] as const).map((s) => (
  <ProductStatusBadge key={s} status={s} />
))}

Preview

PublishedPublished

Code

<ProductStatusBadge status="PUBLISHED" size="sm" />
<ProductStatusBadge status="PUBLISHED" size="md" />

Navigation