UpdateBadge
Inline changelog marker — 5 semantic types (new, improved, fixed, deprecated, breaking) with an optional version chip. Drop next to headings or in changelog tables.
<UpdateBadge> is a two-part pill: a type label (colored by the semantic change kind) and an optional version string. Use it inline beside headings, in tables, or in changelog rows to signal what’s changed at a glance.
All five types
NewImprovedFixedDeprecatedBreaking
import { UpdateBadge } from '@publier/shell/components';
<UpdateBadge type="new" /><UpdateBadge type="improved" /><UpdateBadge type="fixed" /><UpdateBadge type="deprecated" /><UpdateBadge type="breaking" />With version chip
Newv1.0.0Improvedv1.1Breakingv2.0
<UpdateBadge type="new" version="1.0.0" /><UpdateBadge type="improved" version="1.1" /><UpdateBadge type="breaking" version="2.0" />The leading v in the rendered version chip is added automatically — pass just the number.
Next to headings
Drop the badge inline with an H2/H3 to tag the entire section:
## AskAi <UpdateBadge type="improved" version="1.2" />
The AI chat panel now supports keyboard navigation…
## BlurImage <UpdateBadge type="deprecated" />
`BlurImage` is deprecated. Use [ImageZoom](/docs/ui-components/image-zoom) instead.In changelog tables
| Change | |
|---|---|
| Keyboard shortcuts for code blocks | Newv0.3.1 |
| Sidebar scroll persistence | Newv0.0.54 |
Removed /docs/introduction redirect | Breakingv1.0 |
| Search dialog hotkey rewiring | Improvedv0.2 |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'new' | 'improved' | 'fixed' | 'deprecated' | 'breaking' | — | Semantic change kind. Required. |
version | string | — | Version string (rendered as v{version}). Optional. |
class | string | — | Extra CSS class on the wrapper. |
Type reference
| Type | Label | Color family |
|---|---|---|
new | New | Primary accent |
improved | Improved | Secondary accent |
fixed | Fixed | Success (green) |
deprecated | Deprecated | Caution (amber) |
breaking | Breaking | Danger (red) |
Behaviour
- Renders as
<span class="publier-update-badge">containing the type pill and optional version pill. - Inline by design — safe in headings, prose, table cells, and list items.
- Colors follow theme tokens (
--color-warning,--color-error,--color-info) — the amber/red family matches callouts. - Zero JavaScript.
Related
- Lightweight free-form labels → Badge.
- Full changelog entries with body copy → ChangelogEntry.