WordPress · aduth · Feb 5, 2026 · Jan 27, 2026 · Jan 27, 2026 · Jan 27, 2026
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+-   Remove `Box` component. Components that previously used `Box` should use the equivalent design tokens in their CSS directly ([#74981](https://github.com/WordPress/gutenberg/issues/74981)).
+
 ### New Features
 
 -   Add `Tabs` primitive ([#74652](https://github.com/WordPress/gutenberg/pull/74652)).

@@ -39,13 +39,14 @@ import '@wordpress/theme/design-tokens.css';
 ### Basic Component Usage
 
 ```tsx
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
 	return (
-		<Box background="neutral" padding="sm">
-			Hello World
-		</Box>
+		<Stack gap="sm">
+			<div>Item 1</div>
+			<div>Item 2</div>
+		</Stack>
 	);
 }
 ```
@@ -59,11 +60,11 @@ All components in the design system follow consistent patterns for maximum flexi
 Every component supports the `render` prop for complete control over the underlying HTML element:
 
 ```tsx
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
-	// Render Box as a <span /> instead of the default <div />
-	return <Box render={ <span /> }>{ /* ... */ }</Box>;
+	// Render Stack as a <section /> instead of the default <div />
+	return <Stack render={ <section /> }>{ /* ... */ }</Stack>;
 }
 ```
 
@@ -73,12 +74,12 @@ All components forward refs to their underlying DOM elements:
 
 ```tsx
 import { useRef } from '@wordpress/element';
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
-	const boxRef = useRef< HTMLDivElement >( null );
+	const stackRef = useRef< HTMLDivElement >( null );
 
-	return <Box ref={ boxRef }>{ /* ... */ }</Box>;
+	return <Stack ref={ stackRef }>{ /* ... */ }</Stack>;
 }
 ```
 
@@ -87,11 +88,11 @@ function MyComponent() {
 Components merge provided `className` props with their internal styles:
 
 ```tsx
-import { Box } from '@wordpress/ui';
+import { Stack } from '@wordpress/ui';
 
 function MyComponent() {
 	// Your custom CSS className is merged with component styles
-	return <Box className="my-custom-class">{ /* ... */ }</Box>;
+	return <Stack className="my-custom-class">{ /* ... */ }</Stack>;
 }
 ```
 

@@ -1,88 +1,29 @@
+import { useRender, mergeProps } from '@base-ui/react';
+import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
-import { Box } from '../box';
-import { type BoxProps } from '../box/types';
 import { type BadgeProps } from './types';
-
-/**
- * Default render function that renders a span element with the given props.
- */
-const DEFAULT_RENDER = ( props: React.ComponentPropsWithoutRef< 'span' > ) => (
-	<span { ...props } />
-);
-
-/**
- * Maps intent values to Box backgroundColor and color props.
- * Uses strong emphasis styles (as emphasis prop has been removed).
- */
-const getIntentStyles = (
-	intent: BadgeProps[ 'intent' ]
-): Partial< BoxProps > => {
-	switch ( intent ) {
-		case 'high':
-			return {
-				backgroundColor: 'error',
-				color: 'error',
-			};
-		case 'medium':
-			return {
-				backgroundColor: 'warning',
-				color: 'warning',
-			};
-		case 'low':
-			return {
-				backgroundColor: 'caution',
-				color: 'caution',
-			};
-		case 'stable':
-			return {
-				backgroundColor: 'success',
-				color: 'success',
-			};
-		case 'informational':
-			return {
-				backgroundColor: 'info',
-				color: 'info',
-			};
-		case 'draft':
-			return {
-				backgroundColor: 'neutral-weak',
-				color: 'neutral',
-			};
-		case 'none':
-		default:
-			return {
-				backgroundColor: 'neutral',
-				color: 'neutral-weak',
-			};
-	}
-};
+import styles from './style.module.css';
 
 /**
  * A badge component for displaying labels with semantic intent.
- * Built on the Box primitive for consistent theming and accessibility.
  */
-export const Badge = forwardRef< HTMLDivElement, BadgeProps >( function Badge(
-	{ children, intent = 'none', render = DEFAULT_RENDER, ...props },
+export const Badge = forwardRef< HTMLSpanElement, BadgeProps >( function Badge(
+	{ children, intent = 'none', render, className, ...props },
 	ref
 ) {
-	const intentStyles = getIntentStyles( intent );
+	const element = useRender( {
+		render,
+		defaultTagName: 'span',
+		ref,
+		props: mergeProps< 'span' >( props, {
+			className: clsx(
+				styles.badge,
+				styles[ `is-${ intent }-intent` ],
+				className
+			),
+			children,
+		} ),
+	} );
 
-	return (
-		<Box
-			{ ...intentStyles }
-			padding={ { inline: 'sm', block: 'xs' } }
-			borderRadius="lg"
-			render={ render }
-			style={ {
-				fontFamily: 'var(--wpds-font-family-body)',
-				fontSize: 'var(--wpds-font-size-sm)',
-				fontWeight: 'var(--wpds-font-weight-regular)',
-				lineHeight: 'var(--wpds-font-line-height-xs)',
-				...props.style,
-			} }
-			ref={ ref }
-		>
-			{ children }
-		</Box>
-	);
+	return element;
 } );
@@ -0,0 +1,48 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-components {
+	.badge {
+		padding-inline: var(--wpds-dimension-padding-sm);
+		padding-block: var(--wpds-dimension-padding-xs);
+		border-radius: var(--wpds-border-radius-lg);
+		font-family: var(--wpds-font-family-body);
+		font-size: var(--wpds-font-size-sm);
+		font-weight: var(--wpds-font-weight-regular);
+		line-height: var(--wpds-font-line-height-xs);
+	}
+
+	.is-high-intent {
+		background-color: var(--wpds-color-bg-surface-error);
+		color: var(--wpds-color-fg-content-error);
+	}
+
+	.is-medium-intent {
+		background-color: var(--wpds-color-bg-surface-warning);
+		color: var(--wpds-color-fg-content-warning);
+	}
+
+	.is-low-intent {
+		background-color: var(--wpds-color-bg-surface-caution);
+		color: var(--wpds-color-fg-content-caution);
+	}
+
+	.is-stable-intent {
+		background-color: var(--wpds-color-bg-surface-success);
+		color: var(--wpds-color-fg-content-success);
+	}
+
+	.is-informational-intent {
+		background-color: var(--wpds-color-bg-surface-info);
+		color: var(--wpds-color-fg-content-info);
+	}
+
+	.is-draft-intent {
+		background-color: var(--wpds-color-bg-surface-neutral-weak);
+		color: var(--wpds-color-fg-content-neutral);
+	}
+
+	.is-none-intent {
+		background-color: var(--wpds-color-bg-surface-neutral);
+		color: var(--wpds-color-fg-content-neutral-weak);
+	}
+}