Button 按钮

用于触发动作或进行交互。基于 BrConfigProvider 实现全局主题配置。

基础用法

Example

变体

使用 variant 属性来控制按钮的视觉风格。

• Solid: 默认填充样式。
• Outline: 默认透明边框。悬停时显示背景。
• Plain: 带默认文本颜色的边框样式。悬停时变为主题色。
• Pure: 完全无样式（无内边距、高度或边框）。可用作包装器。
• Dashed: 虚线边框样式。
• Soft: 带有主题文本颜色的浅色背景。
• Ghost: 透明背景，悬停时改变。
• Link: 文本链接样式。

所有变体

Example

颜色

使用 color 属性来控制按钮的颜色主题。

Example

尺寸

使用 size 属性来控制按钮的大小。

Example

图标

你可以使用 prefix 或 suffix 插槽添加图标，或者将它们组合在默认插槽中。

Example

加载状态

设置 loading 属性为 true 以显示加载状态。

Example

禁用状态

设置 disabled 属性来禁用按钮。

Example

圆角

设置 rounded 属性为 true 以使用全圆角（药丸）样式。

Example

主题定制

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。

Example

局部定制 (TailwindCSS)

你可以直接使用 TailwindCSS 工具类覆盖样式。

<template>
  <BrButton class="bg-indigo-500 hover:bg-indigo-600">自定义类名</BrButton>
</template>

API

Props

名称	类型	默认值	说明
variant	string	'solid'	视觉风格变体: solid, outline, dashed, soft, ghost, link, plain, pure
color	string	'default'	颜色主题变体: default, primary, secondary, success, warning, danger, info, carbon, accent
size	string	'default'	尺寸变体: default, xs, sm, md, lg, xl, 2xl, icon
as	string	'button'	渲染的 HTML 标签或组件
disabled	boolean	false	是否禁用按钮
loading	boolean	false	是否显示加载状态
rounded	boolean	false	是否使用全圆角样式
type	string	'button'	原生 type 属性

Slots

名称	说明
default	按钮内容
prefix	默认内容之前的内容（例如：图标）
suffix	默认内容之后的内容（例如：图标）

Emits

名称	说明	参数
click	点击事件	(event: MouseEvent)