按钮

按钮允许用户通过单击执行操作和选择。

安装

上述命令仅用于单独安装。如果 @heroui/react 已全局安装，则可以跳过此步骤。

导入

HeroUI 导出 2 个与按钮相关的组件

• Button：用于显示按钮的主要组件。
• ButtonGroup：用于显示一组按钮的包装组件。

使用方法

禁用

尺寸

圆角

颜色

变体

加载中

传递 isLoading 属性以在按钮内显示 Spinner 组件。

你还可以通过将自定义组件传递给 spinner 属性来自定义加载指示器。

带图标

你可以通过传递 startContent 或 endContent 属性向 Button 添加图标。

仅图标

你还可以通过传递 isIconOnly 属性并将所需的图标作为 children 传递来显示没有文本的按钮。

自定义样式

你可以通过将自定义 Tailwind CSS 类传递到组件插槽来自定义 Button 组件。

感谢 Tailwind Merge 库，自定义类名将覆盖默认类名。这意味着你无需担心类冲突。

自定义实现

你还可以使用 useButton hook 来创建你自己的按钮组件。

按钮组

禁用组

ButtonGroup 组件也接受 isDisabled 属性来禁用其中的所有按钮。

组用例

ButtonGroup 组件的一个常见用例是显示一组两个按钮，一个用于选定的值，另一个用于 dropdown。

有关更多详细信息，请参阅 Dropdown 组件。

数据属性

Button 组件在其 base 元素上具有以下属性

• data-hover：当按钮被悬停时。基于 useHover
• data-focus：当按钮被聚焦时。基于 useFocusRing。
• data-focus-visible：当按钮通过键盘聚焦时。基于 useFocusRing。
• data-disabled：当按钮被禁用时。基于 isDisabled 属性。
• data-pressed：当按钮被按下时。基于 usePress
• data-loading：当按钮正在加载时。基于 isLoading 属性。

可访问性

• Button 组件的角色为 button。
• 支持 Space 和 Enter 键的键盘事件。
• 鼠标和触摸事件处理，以及按下状态管理。
• 键盘焦点管理和跨浏览器规范化。

我们建议阅读这篇博客文章，了解构建在不同设备和交互方法上都能良好工作的按钮的复杂性。

API

Button 属性

Button 事件

ButtonGroup 属性