Button

See the WordPress Storybook for more detailed, interactive documentation.

Lets users take actions and make choices with a single click or tap.

import { Button } from '@wordpress/components';
const Mybutton = () => (
  <Button
    variant="primary"
    onClick={ handleClick }
  >
    Click here
  </Button>
);

Props

__next40pxDefaultSize

• Type: boolean
• Required: No
• Default: false

Start opting into the larger default height that will become the
default size in a future version.

accessibleWhenDisabled

• Type: boolean
• Required: No
• Default: false

Whether to keep the button focusable when disabled.

In most cases, it is recommended to set this to true. Disabling a control without maintaining focusability
can cause accessibility issues, by hiding their presence from screen reader users,
or by preventing focus from returning to a trigger element.

Learn more about the focusability of disabled controls
in the WAI-ARIA Authoring Practices Guide.

children

• Type: ReactNode
• Required: No

The button’s children.

description

• Type: string
• Required: No

A visually hidden accessible description for the button.

disabled

• Type: boolean
• Required: No

Whether the button is disabled. If true, this will force a button element
to be rendered, even when an href is given.

In most cases, it is recommended to also set the accessibleWhenDisabled prop to true.

href

• Type: string
• Required: Yes

If provided, renders a instead of button.

icon

• Type: IconType
• Required: No

If provided, renders an Icon component inside the button.

iconPosition

• Type: "left" | "right"
• Required: No
• Default: 'left'

If provided with icon, sets the position of icon relative to the text.

iconSize

• Type: number
• Required: No

If provided with icon, sets the icon size.
Please refer to the Icon component for more details regarding
the default value of its size prop.

isBusy

• Type: boolean
• Required: No

Indicates activity while a action is being performed.

isDestructive

• Type: boolean
• Required: No

Renders a red text-based button style to indicate destructive behavior.

isPressed

• Type: boolean
• Required: No

Renders a pressed button style.

label

• Type: string
• Required: No

Sets the aria-label of the component, if none is provided.
Sets the Tooltip content if showTooltip is provided.

shortcut

• Type: string | { display: string; ariaLabel: string; }
• Required: No

If provided with showTooltip, appends the Shortcut label to the tooltip content.
If an object is provided, it should contain display and ariaLabel keys.

showTooltip

• Type: boolean
• Required: No

If provided, renders a Tooltip component for the button.