查看 WordPress Storybook 以获取更详细、交互式的文档。

让用户通过单击或轻触即可执行操作和做出选择。

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

Props

__next40pxDefaultSize

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

开始采用将在未来版本中成为默认大小的较大默认高度。

accessibleWhenDisabled

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

是否在禁用时保持按钮可聚焦。

在大多数情况下，建议将此设置为 true。在不保持可聚焦性的情况下禁用控件
可能会导致无障碍问题，例如对屏幕阅读器用户隐藏其存在，
或阻止焦点返回到触发元素。

了解有关 WAI-ARIA Authoring Practices Guide 中
禁用控件的可聚焦性的更多信息。

children

  • Type: ReactNode
  • Required: No

按钮的子元素。

description

  • Type: string
  • Required: No

按钮的视觉隐藏无障碍描述。

disabled

  • Type: boolean
  • Required: No

按钮是否被禁用。如果为 true，即使提供了 href，也会强制渲染 button 元素。

在大多数情况下，建议同时将 accessibleWhenDisabled prop 设置为 true。

href

  • Type: string
  • Required: Yes

如果提供，则渲染 a 而不是 button。

icon

  • Type: IconType | null
  • Required: No

如果提供，则在按钮内渲染 Icon 组件。

iconPosition

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

如果与 icon 一起提供，设置图标相对于 text 的位置。

iconSize

  • Type: number
  • Required: No

如果与 icon 一起提供，设置图标大小。
有关其 size prop 默认值的更多详细信息，请参阅 Icon 组件。

isBusy

  • Type: boolean
  • Required: No

在执行操作期间指示活动状态。

isDestructive

  • Type: boolean
  • Required: No

渲染红色文本按钮样式以表示破坏性行为。

isPressed

  • Type: boolean
  • Required: No

渲染按下的按钮样式。

label

  • Type: string
  • Required: No

如果未提供其他标签，则设置组件的 aria-label。
如果提供了 showTooltip，则设置 Tooltip 的内容。

shortcut

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

如果与 showTooltip 一起提供，则将快捷方式标签追加到 tooltip 内容中。
如果提供的是对象，它应包含 display 和 ariaLabel 键。

showTooltip

  • Type: boolean
  • Required: No

如果提供，则为按钮渲染 Tooltip 组件。

size

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

按钮的大小。

  • 'default'：用于常规文本标签按钮，除非是切换按钮。
  • 'compact'：用于切换按钮、图标按钮以及在这些上下文中使用的按钮。
  • 'small'：用于与更高级或辅助功能关联的图标按钮。

如果同时定义了已弃用的 isSmall prop，则此 prop 将优先。

text

  • Type: string
  • Required: No

如果提供，则在按钮内显示给定的文本。如果按钮包含子元素，则文本会显示在这些子元素之前。

tooltipPosition

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

如果与 showTooltip 一起提供，则设置 tooltip 的位置。
有关默认值的更多详细信息，请参阅 Tooltip 组件。

target

  • Type: string
  • Required: No

如果与 href 一起提供，则将 target 属性设置为 a。

variant

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

指定按钮的样式。

接受的值包括：

  1. 'primary'（主要按钮样式）
  2. 'secondary'（默认按钮样式）
  3. 'tertiary'（基于文本的按钮样式）
  4. 'link'（链接按钮样式）