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.

size

• Type: "small" | "default" | "compact"
• Required: No
• Default: 'default'

The size of the button.

• 'default': For normal text-label buttons, unless it is a toggle button.
• 'compact': For toggle buttons, icon buttons, and buttons when used in context of either.
• 'small': For icon buttons associated with more advanced or auxiliary features.

If the deprecated isSmall prop is also defined, this prop will take precedence.

text

• Type: string
• Required: No

If provided, displays the given text inside the button. If the button contains children elements, the text is displayed before them.

tooltipPosition

• Type: "top" | "middle" | "bottom" | "top center" | "top left" | "top right" | "middle center" | "middle left" | "middle right" | "bottom center" | ...
• Required: No

If provided with showTooltip, sets the position of the tooltip.
Please refer to the Tooltip component for more details regarding the defaults.

target

• Type: string
• Required: No

If provided with href, sets the target attribute to the a.

variant

• Type: "link" | "primary" | "secondary" | "tertiary"
• Required: No

Specifies the button’s style.

The accepted values are:

1. 'primary' (the primary button styles)
2. 'secondary' (the default button styles)
3. 'tertiary' (the text-based button styles)
4. 'link' (the link button styles)