Components
Badge
Small status labels for metadata, states, and tags.
Last updated: March 16, 2026
Expanded Variants
Existing badge examples remain unchanged, and this page now includes a wider
set of state, release, notification, and inline content badge patterns.
Primary badge appearance across default, light, outline, and ghost styles.
Shows the badge scale from xs to lg.
Compact numeric and symbolic badges with circular shape.
Status labels using the built-in dot primitive.
Token-style badges with removable actions.
ReactTypeScriptTailwindNext.js Leading icon treatment for plan and state labels.
Badges paired with keyboard shortcuts for quick actions.
SearchCtrlKNew ItemCtrlNFiltersCtrlFCommandCtrlShiftP One state shown in all four appearances.
VerifiedVerifiedVerifiedVerified
Alpha through deprecated release lifecycle examples.
AlphaBetaPreviewExperimentalStableDeprecated Release note labels for updates, fixes, docs, and perf changes.
BreakingAdded support for breaking feature in v4.2 NewAdded support for new feature in v4.2 FixAdded support for fix feature in v4.2 DocsAdded support for docs feature in v4.2 PerfAdded support for perf feature in v4.2 RefactorAdded support for refactor feature in v4.2 Flags for runtime, lab, legacy, and headless availability.
Edge Runtimepreview
AI Suggestionsexperimental
New Dashboardsoon
Legacy APIlegacy
Headless Modeheadless
Circular count badges for inbox, alerts, and review totals.
Inbox5
Updates12
Alerts3
Reviews99+
Pricing and plan emphasis with larger badge sizing.
Mixed-size tags with removable actions.
designuxfrontendtypescripta11yperf Rounded status pills including a live animated dot state.
WIP, lab, request, and featured metadata styles.
Outline treatment across many supported badge variants.
primarynewsooninfobetabreakingfixdocsperfrefactorproverifiedpreviewexperimental
Ghost appearance examples for lightweight metadata.
primarynewsooninfobetabreakingverifiedpropreviewwiplabfeatured
Inline badge usage inside prose and UI copy.
The newNeweditor is now available inPreview.
This API isDeprecated, please migrate to theStableversion.
RequiresProplan or higher.
Disabled states across multiple variants and appearances.
Structured package table with version and lifecycle badges.
PackageVersionStatus
@ui/corev3.2.1latest
@ui/chartsv2.0.0beta
@ui/aiv0.9.0alpha
@ui/legacyv1.4.2legacy
@ui/motionv4.0.0preview
