Badge 徽标

用于显示状态信息、数量或简单的标签。基于 BrConfigProvider 实现全局主题配置。

组件特性

🎨 多种颜色：支持 default、primary、secondary、success、warning、danger、info、carbon 等颜色主题。
📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl 尺寸规格。
📦 多样式变体：支持 solid、soft、outline、subtle 四种视觉风格。
🔴 点模式：支持仅显示点状的最小状态指示器。
📚 溢出计数：支持 max 属性显示溢出数量。
🖼️ 图标支持：支持前缀和后缀图标。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

<script setup lang="ts">
import { BrBadge } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <BrBadge>Default</BrBadge>
  </div>
</template>

颜色

使用 color 属性控制徽标的颜色主题。

<script setup lang="ts">
import { BrBadge } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <BrBadge>Default</BrBadge>
    <BrBadge color="primary">Primary</BrBadge>
    <BrBadge color="secondary">Secondary</BrBadge>
    <BrBadge color="success">Success</BrBadge>
    <BrBadge color="warning">Warning</BrBadge>
    <BrBadge color="danger">Danger</BrBadge>
    <BrBadge color="info">Info</BrBadge>
    <BrBadge color="carbon">Carbon</BrBadge>
    <BrBadge color="accent">Accent</BrBadge>
  </div>
</template>

点模式与数值溢出

用作附着在其他元素上的上标，例如消息通知。支持点模式和数值溢出截断（例如 99+）。

<script setup lang="ts">
import { BrBadge, BrButton } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-8 items-center mt-4">
    <!-- Dot Mode -->
    <BrBadge dot color="danger">
      <BrButton variant="outline">Messages</BrButton>
    </BrBadge>

    <!-- Numeric Badge -->
    <BrBadge :value="5" color="primary">
      <BrButton variant="outline">Unread</BrButton>
    </BrBadge>

    <!-- Numeric Overflow (Default max is 99) -->
    <BrBadge :value="120" color="danger">
      <BrButton variant="outline">Notifications</BrButton>
    </BrBadge>
    
    <!-- Custom Overflow Threshold -->
    <BrBadge :value="15" :max="10" color="warning">
      <BrButton variant="outline">Tasks</BrButton>
    </BrBadge>
  </div>
</template>

变体

提供多种视觉变体以满足不同的设计需求。

<script setup lang="ts">
import { BrBadge } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <BrBadge variant="solid" color="primary">Solid</BrBadge>
    <BrBadge variant="secondary" color="default">Secondary</BrBadge>
    <BrBadge variant="outline" color="primary">Outline</BrBadge>
    <BrBadge variant="soft" color="primary">Soft</BrBadge>
  </div>
</template>

尺寸

提供多种尺寸以适应不同的布局需求。

<script setup>
import { BrBadge } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center gap-4 flex-wrap">
    <BrBadge size="xs">Extra Small</BrBadge>
    <BrBadge size="sm">Small</BrBadge>
    <BrBadge size="default">Default</BrBadge>
    <BrBadge size="md">Medium</BrBadge>
    <BrBadge size="lg">Large</BrBadge>
    <BrBadge size="xl">Extra Large</BrBadge>
    <BrBadge size="2xl">2X Large</BrBadge>
  </div>
</template>

带图标

你可以使用 icon 插槽在徽标内容左侧添加自定义图标。

<script setup lang="ts">
import { BrBadge } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <!-- Icon slot usage -->
    <BrBadge>
      <template #icon>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
        </svg>
      </template>
      Featured
    </BrBadge>

    <BrBadge color="success" variant="soft">
      <template #icon>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <polyline points="20 6 9 17 4 12"></polyline>
        </svg>
      </template>
      Completed
    </BrBadge>

    <BrBadge color="warning" variant="outline">
      <template #icon>
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="12" cy="12" r="10"></circle>
          <line x1="12" y1="8" x2="12" y2="12"></line>
          <line x1="12" y1="16" x2="12.01" y2="16"></line>
        </svg>
      </template>
      Warning
    </BrBadge>
  </div>
</template>

主题定制

BrBadge 完全集成了 BrConfigProvider，允许你通过全局配置或局部类名定制样式。

全局配置 (BrConfigProvider)

你可以通过 BrConfigProvider 全局覆盖徽标的设计 Token，如背景色、文本色和圆角，支持无缝切换亮色和暗色模式。

<script setup lang="ts">
import { ref } from 'vue'
import { BrBadge, BrConfigProvider, BrButton } from '@breezeui/vue'

const isDark = ref(false)

const customTheme = {
  // Custom primary color (Hex or HSL)
  primary: '#8b5cf6', // Purple theme
  primaryForeground: '#ffffff',
  radius: '0.5rem', // Modify default border radius
}

const darkTheme = {
  primary: '#a78bfa',
  primaryForeground: '#1e1b4b',
  background: '#0f172a',
  foreground: '#f8fafc',
}
</script>

<template>
  <div class="space-y-4">
    <BrButton @click="isDark = !isDark">
      Toggle {{ isDark ? 'Light' : 'Dark' }} Mode
    </BrButton>
    
    <BrConfigProvider :theme="isDark ? darkTheme : customTheme">
      <div class="p-6 rounded-lg border bg-background text-foreground transition-colors">
        <h3 class="text-lg font-medium mb-4">Global Theme Customization</h3>
        <div class="flex gap-4">
          <BrBadge color="primary">Themed Badge</BrBadge>
          <BrBadge variant="outline" color="primary">Outline Badge</BrBadge>
        </div>
      </div>
    </BrConfigProvider>
  </div>
</template>

局部定制 (TailwindCSS)

如果你只需要调整单个徽标的样式，可以直接通过 class 属性传递 TailwindCSS 类名，这将自动覆盖 BrConfigProvider 的默认样式。

<script setup lang="ts">
import { BrBadge } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-4">
    <!-- Override background color and font size -->
    <BrBadge class="bg-teal-500 hover:bg-teal-600 text-white text-sm px-4 py-1">
      Teal Badge
    </BrBadge>
    
    <!-- Override border and radius -->
    <BrBadge variant="outline" class="border-pink-500 text-pink-500 rounded-none">
      Square Pink
    </BrBadge>
  </div>
</template>

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`	自定义徽标图标，显示在内容左侧。

#Badge 徽标

#组件特性

#基础用法

#颜色

#点模式与数值溢出

#变体

#尺寸

#带图标

#主题定制

#全局配置 (BrConfigProvider)

#局部定制 (TailwindCSS)

#API

#Props

#Slots