Button: Align compound component metadata

packages/ui/src/button/button.tsx

@@ -9,6 +9,10 @@ import resetStyles from '../utils/css/resets.module.css';
 import focusStyles from '../utils/css/focus.module.css';
 import defenseStyles from '../utils/css/global-css-defense.module.css';
 
+/**
+ * A versatile button component with multiple variants, tones, and sizes.
+ * Built on design tokens for consistent theming and accessibility.
+ */
 export const Button = forwardRef< HTMLButtonElement, ButtonProps >(
 	function Button(
 		{

packages/ui/src/button/icon.tsx

@@ -1,14 +1,7 @@
 import { forwardRef } from '@wordpress/element';
-import { type IconProps } from '../icon/types';
+import { type ButtonIconProps } from './types';
 import { Icon } from '../icon';
 
-interface ButtonIconProps extends IconProps {
-	/**
-	 * The icon to display, from the `@wordpress/icons` package.
-	 */
-	icon: IconProps[ 'icon' ];
-}
-
 export const ButtonIcon = forwardRef< SVGSVGElement, ButtonIconProps >(
 	function ButtonIcon( { icon, ...props }, ref ) {
 		return (

packages/ui/src/button/index.ts

@@ -1,16 +1,16 @@
-import { Button as ButtonButton } from './button';
+import { Button as _Button } from './button';
 import { ButtonIcon } from './icon';
 
+ButtonIcon.displayName = 'Button.Icon';
+
 /**
  * A versatile button component with multiple variants, tones, and sizes.
  * Built on design tokens for consistent theming and accessibility.
  */
-export const Button = Object.assign( ButtonButton, {
+export const Button = Object.assign( _Button, {
 	/**
 	 * An icon component specifically designed to work well when rendered inside
 	 * a `Button` component.
 	 */
 	Icon: ButtonIcon,
-} ) as typeof ButtonButton & {
-	Icon: typeof ButtonIcon;
-};
+} );

packages/ui/src/button/stories/index.story.tsx

@@ -6,6 +6,9 @@ import { Button } from '../index';
 const meta: Meta< typeof Button > = {
 	title: 'Design System/Components/Button',
 	component: Button,
+	subcomponents: {
+		Icon: Button.Icon,
+	},
 	argTypes: {
 		'aria-pressed': {
 			control: { type: 'boolean' },

packages/ui/src/button/types.ts

@@ -1,5 +1,6 @@
 import { type ReactNode, type HTMLAttributes } from 'react';
 import type { Button as _Button } from '@base-ui/react/button';
+import { type IconProps } from '../icon/types';
 import type { ComponentProps } from '../utils/types';
 
 type _ButtonProps = ComponentProps< typeof _Button >;
@@ -70,3 +71,10 @@ export interface ButtonProps
 	 */
 	loadingAnnouncement?: string;
 }
+
+export interface ButtonIconProps extends IconProps {
+	/**
+	 * The icon to display, from the `@wordpress/icons` package.
+	 */
+	icon: IconProps[ 'icon' ];
+}