TBadge / 徽章

Badges are used to display status labels, category tags, or unread counts on buttons, titles, or cards. / 徽章用于在按钮、标题或卡片上展示状态标签、分类标记或未读计数。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
color	TablerColor	'default'	Badge color
size	'sm' | 'lg'	—	Size
pill	boolean	false	Pill shape
outline	boolean	false	Outline style
notification	boolean	false	Notification dot mode
blink	boolean	false	Blinking effect (requires notification)
href	string	—	Link
to	RouteLocationRaw	—	Router link

Slots / 插槽

Slot	Description / 说明
default	Badge content (text) / 徽章内文字

Basic Usage / 基础用法

<script setup lang="ts">
import { TBadge } from '@gulcc/tabler-vue'
</script>

<template>
  <TBadge color="primary">Primary</TBadge>
  <TBadge color="success">Success / 成功</TBadge>
  <TBadge color="danger">Danger / 危险</TBadge>
  <TBadge color="warning">Warning / 警告</TBadge>
  <TBadge color="info">Info</TBadge>
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TBadge } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Pill badge / 胶囊 -->
  <TBadge color="primary" pill>Pill / 胶囊</TBadge>

  <!-- Outline badge / 轮廓 -->
  <TBadge color="red" outline>Outline / 轮廓</TBadge>

  <!-- Sizes / 尺寸 -->
  <TBadge color="blue" size="sm">Small / 小</TBadge>
  <TBadge color="blue" size="lg">Large / 大</TBadge>

  <!-- Notification badge with blink / 闪烁角标 -->
  <div style="position:relative;display:inline-block;">
    Messages / 消息
    <TBadge color="red" notification :blink="true">3</TBadge>
  </div>

  <!-- Clickable badge / 可点击 -->
  <TBadge color="green" href="/tags/vue">#vue</TBadge>

  <!-- Light variant / 浅色变体 -->
  <TBadge color="primary-lt">Light / 浅色</TBadge>
</template>

Tips / 避坑指南

• blink requires notification={true} to work / blink 必须同时设置 notification={true}
• outline mode strips -lt suffix from colors (outline doesn't support light variants)
• When used as a notification badge, the parent container needs position: relative
• Defaults to <span>, switches to <a> or <router-link> when href/to is set