Publication Status Badge

A preconfigured status badge for content moderation workflows with consistent icons, colors, and labels. Composes StatusBadge internally.

Installation

bunx @happlyui/cli@latest add publication-status-badge

Dependencies

npm packages

@remixicon/react

Registry dependencies

These are automatically installed when you add this component.

status-badge

Usage

import PublicationStatusBadge from "@/components/ui/publication-status-badge"

<PublicationStatusBadge status="approved" />

Examples

Draft

Neutral badge for draft content.

Draft

<PublicationStatusBadge status="draft" />

Waiting for Review

Neutral badge for content awaiting review.

Waiting for review

<PublicationStatusBadge status="waiting_for_review" />

Approved

Success badge for approved content.

Approved

<PublicationStatusBadge status="approved" />

Require Changes

Warning badge for content that needs changes.

Require changes

<PublicationStatusBadge status="require_changes" />

Declined

Error badge for declined content.

Declined

<PublicationStatusBadge status="declined" />

All Statuses

All five moderation statuses side by side.

Draft

Waiting for review

Approved

Require changes

Declined

<PublicationStatusBadge status="draft" />
<PublicationStatusBadge status="waiting_for_review" />
<PublicationStatusBadge status="approved" />
<PublicationStatusBadge status="require_changes" />
<PublicationStatusBadge status="declined" />

Light Variant

All statuses using the light variant with colored backgrounds.

Draft

Waiting for review

Approved

Require changes

Declined

<PublicationStatusBadge status="approved" variant="light" />

Custom Label

Override the default label via children for i18n or custom text.

Approuvé

<PublicationStatusBadge status="approved">Approuvé</PublicationStatusBadge>

API Reference

PublicationStatusBadge

A preconfigured StatusBadge that maps moderation statuses to semantic colors, icons, and labels.

Prop	Type	Default	Description
`status`	`'draft' \| 'waiting_for_review' \| 'approved' \| 'require_changes' \| 'declined'`	-	The moderation status
`variant`	`'stroke' \| 'light'`	`'stroke'`	The visual variant of the badge
`children`	`React.ReactNode`	-	Override the default label (useful for i18n)