Badge

Displays a badge or a component that looks like a badge. Implements global theme configuration based on BrConfigProvider, providing flexible style customization capabilities.

Component Features

🎨 Multiple Colors: Supports default, primary, secondary, success, warning, danger, info, carbon color themes.
📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl size specs.
📦 Multiple Variants: Supports solid, soft, outline, subtle visual variants.
🔴 Dot Mode: Supports dot-only mode for minimal status indicators.
📚 Overflow Count: Supports max prop for displaying overflow count.
🖼️ Icon Support: Supports prefix and suffix icons.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

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

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

Colors

Use the color prop to control the color theme of the badge.

<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>

Dot Mode & Numeric Overflow

Used as a superscript attached to other elements, such as message notifications. Supports dot mode and numeric overflow truncation (e.g., 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>

Variants

Provides multiple visual variants to meet different design requirements.

<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>

Sizes

Provides multiple sizes to suit different layout needs.

<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>

With Icon

You can use the icon slot to add a custom icon to the left of the badge content.

<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>

Theming

BrBadge fully integrates with BrConfigProvider, allowing you to customize styles via global configuration or local class names.

Global Configuration (BrConfigProvider)

You can globally override badge design tokens such as background color, text color, and border radius via BrConfigProvider, supporting seamless switching between light and dark modes.

<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>

Local Customization (TailwindCSS)

If you only need to adjust the style of individual badges, you can pass TailwindCSS class names directly via the class prop, which will automatically override the default styles from 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

Name	Type	Default	Description
`variant`	`'solid' \| 'secondary' \| 'outline' \| 'soft'`	`'solid'`	Badge style variant
`color`	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'carbon' \| 'accent'`	`'default'`	Badge color theme
`size`	`'default' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'icon'`	`'default'`	Badge size
`dot`	`boolean`	`false`	Whether to enable dot mode
`value`	`number \| string`	`-`	Value to display, default slot is not needed when this is provided
`max`	`number`	`99`	Maximum value for numeric overflow, displays `max+` when exceeded
`disabled`	`boolean`	`false`	Whether the badge is disabled
`standalone`	`boolean`	`false`	Whether to force standalone positioning, use with relative parent container
`as`	`string`	`'div'`	The HTML tag to render as
`class`	`any`	`-`	Custom CSS class names

Slots

Name	Description
`default`	Custom badge content. If dot mode is used and it wraps other elements, this slot is for the wrapped target element.
`icon`	Custom badge icon, displayed to the left of the content.

#Badge

#Component Features

#Basic Usage

#Colors

#Dot Mode & Numeric Overflow

#Variants

#Sizes

#With Icon

#Theming

#Global Configuration (BrConfigProvider)

#Local Customization (TailwindCSS)

#API

#Props

#Slots