Badge 徽章
Badge（徽章）组件主要用于突出显示特定的状态、分类标签或数值。
它能有效吸引用户的注意力，常用于标记新元素、提示未读消息或展示关键的补充信息。
基础用法
内置了丰富的预设色彩，满足不同业务场景下的视觉区分需求。
查看代码
vue
<TBadge>Default</TBadge>
<TBadge color="blue">Blue</TBadge>
<TBadge color="azure">Azure</TBadge>
<TBadge color="indigo">Indigo</TBadge>
<TBadge color="purple">Purple</TBadge>
<TBadge color="pink">Pink</TBadge>
<TBadge color="red">Red</TBadge>
<TBadge color="orange">Orange</TBadge>
<TBadge color="yellow">Yellow</TBadge>
<TBadge color="lime">Lime</TBadge>
<TBadge color="green">Green</TBadge>
<TBadge color="teal">Teal</TBadge>
<TBadge color="cyan">Cyan</TBadge>
<TBadge color="dark">Dark</TBadge>
<TBadge color="light">Light</TBadge>在标题中使用
将徽章嵌入标题中，可以直观地标注重要或新增内容。
徽章的尺寸会自动适配当前标题级别（ <h1> 到 <h6>）的字体大小。
查看代码
vue
<h1>
Example heading
<TBadge>New</TBadge>
</h1>
<h2>
Example heading
<TBadge>New</TBadge>
</h2>
<h3>
Example heading
<TBadge>New</TBadge>
</h3>
<h4>
Example heading
<TBadge>New</TBadge>
</h4>
<h5>
Example heading
<TBadge>New</TBadge>
</h5>
<h6>
Example heading
<TBadge>New</TBadge>
</h6>浅色变体
在预设颜色名称后追加 -lt 即可启用浅色变体。
当你需要柔和、低饱和度的视觉效果以避免喧宾夺主时，浅色徽章是绝佳选择。
💡 小提示：
-lt通常是 "light" 的缩写，在前端样式中常用来表示浅色或低饱和度的背景。
查看代码
vue
<TBadge color="default-lt">Default</TBadge>
<TBadge color="blue-lt">Blue</TBadge>
<TBadge color="azure-lt">Azure</TBadge>
<TBadge color="indigo-lt">Indigo</TBadge>
<TBadge color="purple-lt">Purple</TBadge>
<TBadge color="pink-lt">Pink</TBadge>
<TBadge color="red-lt">Red</TBadge>
<TBadge color="orange-lt">Orange</TBadge>
<TBadge color="yellow-lt">Yellow</TBadge>
<TBadge color="lime-lt">Lime</TBadge>
<TBadge color="green-lt">Green</TBadge>
<TBadge color="teal-lt">Teal</TBadge>
<TBadge color="cyan-lt">Cyan</TBadge>
<TBadge color="dark-lt">Dark</TBadge>
<TBadge color="light-lt">Light</TBadge>状态徽章
使用语义化的状态颜色（如 primary、success、danger 等），可以快速传达操作结果或系统状态。
查看代码
vue
<div class="badges-list">
<TBadge color="primary">Primary</TBadge>
<TBadge color="secondary">Secondary</TBadge>
<TBadge color="success">Success</TBadge>
<TBadge color="danger">Danger</TBadge>
<TBadge color="warning">Warning</TBadge>
</div>
<br>
<div class="badges-list">
<TBadge color="primary-lt">Primary</TBadge>
<TBadge color="secondary-lt">Secondary</TBadge>
<TBadge color="success-lt">Success</TBadge>
<TBadge color="danger-lt">Danger</TBadge>
<TBadge color="warning-lt">Warning</TBadge>
</div>胶囊形态
添加 pill 属性即可将徽章转换为全圆角的胶囊形态。
这非常适合用来展示数字（例如未读消息数或通知红点），它的宽度会根据内部内容的长度自动弹性伸缩。
查看代码
vue
<TBadge pill>Default</TBadge>
<TBadge pill color="blue">Blue</TBadge>
<TBadge pill color="azure">Azure</TBadge>
<TBadge pill color="indigo">Indigo</TBadge>
<TBadge pill color="purple">Purple</TBadge>
<TBadge pill color="pink">Pink</TBadge>
<TBadge pill color="red">Red</TBadge>
<TBadge pill color="orange">Orange</TBadge>
<TBadge pill color="yellow">Yellow</TBadge>
<TBadge pill color="lime">Lime</TBadge>
<TBadge pill color="green">Green</TBadge>
<TBadge pill color="teal">Teal</TBadge>
<TBadge pill color="cyan">Cyan</TBadge>
<TBadge pill color="dark">Dark</TBadge>
<TBadge pill color="light">Light</TBadge>💡 小提示：就像我们平时在微信或邮件图标右上角看到的那种小红点提示一样，不管数字是1位还是3位，它都能完美适配~
查看代码
vue
<TBadge pill>0</TBadge>
<TBadge pill color="blue">1</TBadge>
<TBadge pill color="azure">2</TBadge>
<TBadge pill color="indigo">3</TBadge>
<TBadge pill color="purple">4</TBadge>
<TBadge pill color="pink">5</TBadge>
<TBadge pill color="red">6</TBadge>
<TBadge pill color="orange">7</TBadge>
<TBadge pill color="yellow">8</TBadge>
<TBadge pill color="lime">9</TBadge>
<TBadge pill color="green">10</TBadge>
<TBadge pill color="teal">101</TBadge>
<TBadge pill color="cyan">1001</TBadge>
<TBadge pill color="dark">10001</TBadge>
<TBadge pill color="light">100001</TBadge>轮廓风格
使用 outline 属性可移除背景色并保留对应的描边，适合在深色背景或需要“幽灵按钮”风格的场景下使用。
图标徽章
结合图标使用，可以进一步增强徽章的表意能力，使其在视觉上更加生动直观。
查看代码
vue
<TBadge color="blue">
<IconHome size="14"/>
房租
</TBadge>
<TBadge color="red">
物业费
<IconHome size="14"/>
</TBadge>作为链接使用
为组件设置 href 属性后，徽章将被渲染为可点击的 <a> 标签。
这也就意味着你可以像对待普通链接一样，为其添加 target="_blank" 等原生属性。
查看代码
vue
<TBadge href="#" color="default-lt">Default</TBadge>
<TBadge href="#" color="blue-lt">Blue</TBadge>
<TBadge href="#" color="azure-lt">Azure</TBadge>
<TBadge href="#" color="indigo-lt">Indigo</TBadge>
<TBadge href="#" color="purple-lt">Purple</TBadge>
<TBadge href="#" color="pink-lt">Pink</TBadge>
<TBadge href="#" color="red-lt">Red</TBadge>
<TBadge href="#" color="orange-lt">Orange</TBadge>
<TBadge href="#" color="yellow-lt">Yellow</TBadge>
<TBadge href="#" color="lime-lt">Lime</TBadge>
<TBadge href="#" color="green-lt">Green</TBadge>
<TBadge href="#" color="teal-lt">Teal</TBadge>
<TBadge href="#" color="cyan-lt">Cyan</TBadge>
<TBadge href="#" color="dark-lt">Dark</TBadge>
<TBadge href="#" color="light-lt">Light</TBadge>此外，组件已深度集成 Vue Router。
在项目中引入路由后，只需通过配置 to 属性即可轻松实现应用的内部导航。
vue
<TBadge to="/dashboard" color="blue-lt">Dashboard</TBadge>带徽章的按钮
徽章常用于按钮上，以显示未读消息数、新通知或状态提示。
通过将 <TBadge> 与按钮结合，并利用定位样式，可轻松实现“右上角红点”或“计数徽章”的效果。
如果你没有为徽章提供文本内容，它会显示为一个小圆点。
这种方式非常适合创建简洁的通知按钮。
查看代码
vue
<TButton>
Notifications
<TBadge color="red" notification>2</TBadge>
</TButton>
<TButton>
InBox
<TBadge color="red" notification>4</TBadge>
</TButton>
<TButton>
Profile
<TBadge color="red" notification></TBadge>
</TButton>多种尺寸
通过 size 属性可以自由调整徽章的大小，以适应不同的 UI 层级。
vue
<TBadge color="blue" size="sm">SM</TBadge>
<TBadge color="blue">DEFAULT</TBadge>
<TBadge color="blue" size="lg">LG</TBadge>属性自由组合
上述所有的外观属性（如颜色、轮廓、圆角、尺寸）都可以自由组合，以应对复杂多变的业务设计需求。
API
属性 (Props)
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 徽章的颜色。支持基础色彩（如 blue）、浅色变体（加 -lt 后缀）以及语义化状态色（如 primary、success）。 | string | undefined |
pill | 是否应用胶囊形态（全圆角）。非常适合用于包裹数字类型的提示。 | boolean | false |
outline | 是否启用轮廓风格（移除背景色，保留边框和文字颜色）。 | boolean | false |
size | 徽章的大小尺寸。可选值为 sm (小) 或 lg (大)，不传则为常规尺寸。 | 'sm' | 'lg' | undefined | undefined |
href | 目标链接地址。设置后，组件将在底层渲染为原生的 <a> 标签。注：支持直接透传 target="_blank" 等原生属性。 | string | undefined |
notification | 是否作为通知徽章使用。启用后，徽章将自动缩小并以圆形显示，适用于右上角“小红点”式的通知提示（即使无文本内容也会显示为圆点）。 | boolean | false |
to | 路由跳转目标。深度集成 Vue Router，设置后组件将作为路由链接渲染。 | string | object | undefined |
插槽 (Slots)
| 插槽名 | 说明 |
|---|---|
default | 徽章内部的默认内容插槽，支持纯文本、数字或传入 <Icon...> 等图标组件。 |