Badge

Inline semantic label — 6 variants × 3 sizes. Use for status chips, version tags, stability indicators, and feature flags in running prose.

<Badge> renders a small pill inline with text — ideal for flagging something’s status, version, stability, or audience right where the reader’s eye is.

All six variants

defaultnotesuccesstipcautiondanger

import { Badge } from '@publier/shell/components';

<Badge text="default" />
<Badge text="note" variant="note" />
<Badge text="success" variant="success" />
<Badge text="tip" variant="tip" />
<Badge text="caution" variant="caution" />
<Badge text="danger" variant="danger" />

Three sizes

smallmedium (default)large

<Badge text="small" variant="note" size="small" />
<Badge text="medium (default)" variant="note" />
<Badge text="large" variant="note" size="large" />

Common patterns

Flag the status of a feature mid-paragraph. We ship auto-compaction beta behind the experimental.compact flag. Call out version requirements — requires Node 22+ v1.0+ — without interrupting the reading flow.

We ship auto-compaction <Badge text="beta" variant="caution" size="small" />
behind the `experimental.compact` flag.

Requires Node 22+ <Badge text="v1.0+" variant="note" size="small" /> — without
interrupting the reading flow.

Badges also work inside table cells:

Props

Behaviour

• Renders as a styled <span>.
• Colors pull from theme tokens (--color-primary, --color-success, etc.) — the same accents your callouts use, so badges adapt automatically when you switch themes.
• Zero JavaScript.

Related

• Changelog markers → UpdateBadge (adds semantic change-type styling and version chip).
• Full callout boxes → Callouts.