Tag 标签
基于 BrConfigProvider 实现全局主题配置，支持多状态/多样式变体的企业级标签组件。用于标记和选择。
基础用法
最基础的标签展示。
Default
Primary
Success
Warning
Error
Info
Example
样式变体
提供 solid（实色）、soft（柔和，默认）、outline（线框）三种变体。
Solid
Solid
Solid
Soft
Soft
Soft
Outline
Outline
Outline
Example
尺寸
支持多种尺寸配置。
Extra Small
Small
Medium
Large
Extra Large
2XL
Example
圆角
支持多种圆角配置。
None
Small
Medium
Large
Full
Example
字体加粗
通过设置 bold 属性可以使标签字体加粗。
Normal
Bold
Primary Bold
Solid Bold
Example
可关闭标签
通过设置 closable 属性，标签会显示关闭按钮。点击关闭按钮会触发 close 事件。
Tag 1
Tag 2
Tag 3
Example
标签组与溢出省略
使用 BrTagGroup 可以方便地管理一组标签，支持统一间距和最大显示数量。
Vue
React
Angular
Svelte
Apple
Banana
Orange
+2
Example
全局主题定制
你可以通过 BrConfigProvider 全局配置 Tag 的默认表现，或使用 TailwindCSS 局部覆盖。
Primary
Success
Custom
Example
API
BrTag Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
status | 标签状态 | 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'default' |
variant | 变体样式 | 'solid' | 'outline' | 'soft' | 'soft' |
size | 尺寸大小，支持受 ConfigProvider 全局控制 | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'md' |
rounded | 圆角大小 | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' |
bold | 是否字体加粗 | boolean | false |
closable | 是否可关闭，启用后会显示关闭图标 | boolean | false |
disabled | 是否禁用 | boolean | false |
as | 渲染为指定的标签 | string | 'div' |
BrTag Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click | 点击标签时触发 | (event: MouseEvent) => void |
close | 点击关闭按钮时触发 | (event: MouseEvent) => void |
BrTag Slots
| 插槽名 | 说明 |
|---|---|
default | 自定义标签内容 |
icon | 前置图标插槽 |
closeIcon | 自定义关闭图标插槽 |
BrTagGroup Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
gap | 标签组间距 | 'xs' | 'sm' | 'md' | 'lg' | 'sm' |
wrap | 是否允许换行 | boolean | true |
max | 最大显示数量，超出时显示 +N | number | - |
BrTagClose Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
class | 自定义类名 | any | - |