Migrate wp-components Badge instances to UI Badge
Author: simisonCreated Sep 4, 2026Updated Sep 18, 2026
Labels[Type] Enhancement[Feature] UI Components[Package] Components[Package] Editor[Package] Block library[Package] Block editorDesign System[Package] Fields
Migrate instances of WP Components private Badge component to UI Badge.
Components Badge (old)
UI Badge (new)
Map intents to…
- Success → Stable
- Warning → Low or Medium
- Error → High
- Info → Informational
- No intent → None or Draft
...and it's also a good moment to inspect if the original implemented intent was a good choice, or if we should change to something else. The aim is not to simply match visuals 1:1.
To migrate
-
block-editor—src/components/block-visibility/viewport-visibility-info.jsx(#82670) -
block-editor—src/components/global-styles/state-control-badges.jsx(#82608) -
block-editor—src/components/link-control/link-preview.jsx(#82684) -
block-editor—src/components/link-picker/link-preview.jsx(#82684) -
block-editor—src/components/block-card/index.jsx(#82503) -
block-library—src/video/tracks-editor.jsx(#82441) -
editor—src/components/post-card-panel/index.jsx(#82500) -
fields—src/fields/page-title/view.tsx(#82499) -
global-styles-ui—src/screen-revisions/revisions-buttons.tsx(#82560)
Finally after migration, deprecate old Badge before removing it completely later:
Source: WordPress/gutenberg