packages/ui/src/button/button.tsx - trunk - githubmirror/gutenberg

packages/ui/src/button/button.tsx

65 строк2 KB

Lena Morita

UI: Use focus styles from base-styles (#80635)

31 июл 2026, 19:07

31 июл 2026, 19:07956d1f3

import { Button as _Button } from '@base-ui/react/button';
import clsx from 'clsx';
import { speak } from '@wordpress/a11y';
import { forwardRef, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { type ButtonProps } from './types';
import styles from './style.module.css';
import resetStyles from '../utils/css/resets.module.css';
import focusStyles from '../utils/css/focus.module.scss';
import defenseStyles from '../utils/css/global-css-defense.module.css';

/**
 * A versatile button component with multiple variants, tones, and sizes.
 *
 * See the [Usage Guidelines](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-button-usage-guidelines--docs)
 * for when to use `Button`, `IconButton`, `Link`, or `LinkButton`.
 */
export const Button = forwardRef< HTMLButtonElement, ButtonProps >(
	function Button(
		{
			tone = 'brand',
			variant = 'solid',
			size = 'default',
			className,
			focusableWhenDisabled = true,
			disabled,
			loading,
			loadingAnnouncement = __( 'Loading' ),
			children,
			...props
		},
		ref
	) {
		const mergedClassName = clsx(
			defenseStyles.button,
			resetStyles[ 'box-sizing' ],
			focusStyles[ 'outset-ring--focus-except-active' ],
			variant !== 'unstyled' && styles.button,
			styles[ `is-${ tone }` ],
			styles[ `is-${ variant }` ],
			styles[ `is-${ size }` ],
			loading && styles[ 'is-loading' ],
			className
		);

		// Announce loading state to assistive technology
		useEffect( () => {
			if ( loading && loadingAnnouncement ) {
				speak( loadingAnnouncement );
			}
		}, [ loading, loadingAnnouncement ] );

		return (
			<_Button
				ref={ ref }
				className={ mergedClassName }
				focusableWhenDisabled={ focusableWhenDisabled }
				disabled={ disabled ?? loading }
				{ ...props }
			>
				{ children }
			</_Button>
		);
	}
);