按钮

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

安装

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

导入

NextUI 导出了 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

按钮属性

按钮事件

按钮组属性