Button

允许用户通过单次轻触执行操作和选择

安装

npm

npm add @vue-nextui/button

pnpm

pnpm add @vue-nextui/button

yarn

yarn add @vue-nextui/button

bun

bun add @vue-nextui/button

NOTE

如果你使用全局安装的方式，可忽略此安装步骤

导入

按需导入

import { Button } from '@vue-nextui/button'

全局导入

import { Button } from 'nextui-vue'

使用

预览源代码

禁用

按钮将无法点击

预览源代码

大小

显示不同尺寸的按钮

预览源代码

半径

显示不同角度的按钮

预览源代码

颜色

显示不同颜色的按钮

预览源代码

变体

显示不同种类的按钮

预览源代码

加载

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

WARNING

Work in process

您还可以通过将自定义组件传递给spinner插槽来自定义加载spinner。

预览源代码

带图标

您可以通过传递startContent或endContent插槽来添加图标。

预览源代码

仅图标

您还可以通过将isIconOnly属性和所需的图标作为默认子元素传递来显示不带文本的按钮。

预览源代码

自定义样式

您可以通过将自定义 Tailwind CSS 类传递给组件槽来自定义 Button 组件。

预览源代码