Badge 徽标
用于显示状态信息、数量或简单的标签。基于 BrConfigProvider 实现全局主题配置。
基础用法
Default
Example
颜色
使用 color 属性控制徽标的颜色主题。
Default
Primary
Secondary
Success
Warning
Danger
Info
Carbon
Accent
Example
点模式与数值溢出
用作附着在其他元素上的上标，例如消息通知。支持点模式和数值溢出截断（例如 99+）。
5
99+
10+
Example
变体
提供多种视觉变体以满足不同的设计需求。
Solid
Secondary
Outline
Soft
Example
尺寸
提供多种尺寸以适应不同的布局需求。
Extra Small
Small
Default
Medium
Large
Extra Large
2X Large
Example
带图标
你可以使用 icon 插槽在徽标内容左侧添加自定义图标。
Featured
Completed
Warning
Example
主题定制
BrBadge 完全集成了 BrConfigProvider，允许你通过全局配置或局部类名定制样式。
全局配置 (BrConfigProvider)
你可以通过 BrConfigProvider 全局覆盖徽标的设计 Token，如背景色、文本色和圆角，支持无缝切换亮色和暗色模式。
Global Theme Customization
Themed Badge
Outline Badge
Example
局部定制 (TailwindCSS)
如果你只需要调整单个徽标的样式，可以直接通过 class 属性传递 TailwindCSS 类名，这将自动覆盖 BrConfigProvider 的默认样式。
Teal Badge
Square Pink
Example
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
variant | 'solid' | 'secondary' | 'outline' | 'soft' | 'solid' | 徽标样式变体 |
color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'carbon' | 'accent' | 'default' | 徽标颜色主题 |
size | 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'icon' | 'default' | 徽标尺寸 |
dot | boolean | false | 是否启用点模式 |
value | number | string | - | 显示的值，提供此值时不需要默认插槽 |
max | number | 99 | 数值溢出的最大值，超过时显示 max+ |
disabled | boolean | false | 是否禁用徽标 |
standalone | boolean | false | 是否强制独立定位，与相对定位的父容器配合使用 |
as | string | 'div' | 渲染的 HTML 标签 |
class | any | - | 自定义 CSS 类名 |
Slots
| 插槽名 | 说明 |
|---|---|
default | 自定义徽标内容。如果使用点模式且包裹其他元素，此插槽用于包裹的目标元素。 |
icon | 自定义徽标图标，显示在内容左侧。 |