Button

按钮允许用户通过单次点击执行操作并做出选择。

安装

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

导入

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

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

用法

禁用状态

尺寸

圆角

颜色

变体

加载中

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

您也可以通过传递一个自定义组件给 spinner 属性来自定义加载旋转器。

带图标

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

仅图标

您也可以通过传递 isIconOnly 属性并将所需图标作为 children 来显示一个无文本的按钮。

自定义样式

您可以通过向组件插槽传递自定义的 Tailwind CSS 类来自定义 Button 组件。

多亏了 Tailwind Merge 库，自定义类名将覆盖默认类名。这意味着您无需担心类冲突。

自定义实现

您也可以使用 useButton 钩子来创建您自己的按钮组件。

按钮组

组禁用

ButtonGroup 组件也接受 isDisabled 属性以禁用其内部的所有按钮。

组用例

ButtonGroup 组件的一个常见用例是显示一组两个按钮，一个用于选定的值，另一个用于“下拉菜单”。

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

数据属性

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

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

无障碍性

• 按钮具有 button 的角色。
• 支持 空格键 和 回车键 的键盘事件。
• 鼠标和触摸事件处理，以及按下状态管理。
• 键盘焦点管理和跨浏览器规范化。

我们建议阅读这篇关于构建跨设备和交互方式都能良好工作的按钮的复杂性的博客文章。

API

Button 属性

Button 事件

Button Group 属性