Tag

A tag component for marking and selection, supporting multiple states and style variants based on BrConfigProvider.

Component Features

✅ Multiple States: Supports default, primary, secondary, success, warning, danger, info states.
🎨 Multiple Variants: Supports solid, soft, outline, subtle visual variants.
📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl size specs.
🔄 Rounded Styles: Supports rounded, rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full rounded styles.
🔵 Bold Style: Supports bold version of solid variant.
✖️ Closable: Supports closable prop to add a close button.
📦 Tag Group: Supports BrTagGroup component to manage a group of tags.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic Usage

The most basic tag display.

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

<template>
  <div class="flex flex-wrap gap-2">
    <BrTag>Default</BrTag>
    <BrTag status="primary">Primary</BrTag>
    <BrTag status="success">Success</BrTag>
    <BrTag status="warning">Warning</BrTag>
    <BrTag status="error">Error</BrTag>
    <BrTag status="info">Info</BrTag>
  </div>
</template>

Variants

Provides solid (solid color), soft (soft, default), outline (outlined) three variants.

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

<template>
  <div class="flex flex-col gap-4">
    <div class="flex gap-2">
      <BrTag variant="solid" status="primary">Solid</BrTag>
      <BrTag variant="solid" status="success">Solid</BrTag>
      <BrTag variant="solid" status="error">Solid</BrTag>
    </div>
    <div class="flex gap-2">
      <BrTag variant="soft" status="primary">Soft</BrTag>
      <BrTag variant="soft" status="success">Soft</BrTag>
      <BrTag variant="soft" status="error">Soft</BrTag>
    </div>
    <div class="flex gap-2">
      <BrTag variant="outline" status="primary">Outline</BrTag>
      <BrTag variant="outline" status="success">Outline</BrTag>
      <BrTag variant="outline" status="error">Outline</BrTag>
    </div>
  </div>
</template>

Sizes

Supports multiple size configurations.

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

<template>
  <div class="flex items-end gap-2">
    <BrTag size="xs">Extra Small</BrTag>
    <BrTag size="sm">Small</BrTag>
    <BrTag size="md">Medium</BrTag>
    <BrTag size="lg">Large</BrTag>
    <BrTag size="xl">Extra Large</BrTag>
    <BrTag size="2xl">2XL</BrTag>
  </div>
</template>

Rounded Styles

Supports multiple border radius configurations.

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

<template>
  <div class="flex gap-2">
    <BrTag rounded="none">None</BrTag>
    <BrTag rounded="sm">Small</BrTag>
    <BrTag rounded="md">Medium</BrTag>
    <BrTag rounded="lg">Large</BrTag>
    <BrTag rounded="full">Full</BrTag>
  </div>
</template>

Bold Style

Setting the bold attribute makes the tag text bold.

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

<template>
  <div class="flex gap-2">
    <BrTag>Normal</BrTag>
    <BrTag bold>Bold</BrTag>
    <BrTag status="primary" bold>Primary Bold</BrTag>
    <BrTag variant="solid" status="success" bold>Solid Bold</BrTag>
  </div>
</template>

Closable

Setting the closable attribute displays a close button on the tag. Clicking the close button triggers the close event.

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

const tags = ref([
  { id: 1, name: 'Tag 1', status: 'primary' },
  { id: 2, name: 'Tag 2', status: 'success' },
  { id: 3, name: 'Tag 3', status: 'warning' }
])

const handleClose = (tagToRemove: any) => {
  tags.value = tags.value.filter(tag => tag.id !== tagToRemove.id)
}
</script>

<template>
  <div class="flex gap-2">
    <BrTag 
      v-for="tag in tags" 
      :key="tag.id"
      closable 
      :status="tag.status as any" 
      @close="handleClose(tag)"
    >
      {{ tag.name }}
    </BrTag>
    <span v-if="tags.length === 0" class="text-sm text-muted-foreground cursor-pointer hover:text-primary" @click="tags = [{ id: 1, name: 'Tag 1', status: 'primary' }, { id: 2, name: 'Tag 2', status: 'success' }, { id: 3, name: 'Tag 3', status: 'warning' }]">Reset</span>
  </div>
</template>

Using BrTagGroup makes it easy to manage a group of tags, supporting unified spacing and maximum display count.

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

<template>
  <div class="flex flex-col gap-4">
    <!-- Basic Tag Group -->
    <BrTagGroup gap="md">
      <BrTag>Vue</BrTag>
      <BrTag>React</BrTag>
      <BrTag>Angular</BrTag>
      <BrTag>Svelte</BrTag>
    </BrTagGroup>
    
    <!-- Overflow Ellipsis -->
    <BrTagGroup :max="3" :wrap="false" class="w-[280px]">
      <BrTag>Apple</BrTag>
      <BrTag>Banana</BrTag>
      <BrTag>Orange</BrTag>
      <BrTag>Mango</BrTag>
      <BrTag>Peach</BrTag>
    </BrTagGroup>
  </div>
</template>

Theme Customization

You can globally configure the default behavior of Tag through BrConfigProvider, or use TailwindCSS for local overrides.

<script setup lang="ts">
import { BrTag, BrTagGroup, BrConfigProvider } from '@breezeui/vue'
</script>

<template>
  <BrConfigProvider>
    <div class="p-4 bg-background">
      <BrTagGroup gap="sm">
        <BrTag status="primary">Primary</BrTag>
        <BrTag status="success">Success</BrTag>
        <!-- Local override border radius and background color -->
        <BrTag class="rounded-none bg-blue-500 text-white">Custom</BrTag>
      </BrTagGroup>
    </div>
  </BrConfigProvider>
</template>

API

BrTag Props

Prop	Description	Type	Default
`status`	Tag status	`'default' \| 'primary' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'default'`
`variant`	Variant style	`'solid' \| 'outline' \| 'soft'`	`'soft'`
`size`	Size, can be controlled globally by ConfigProvider	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`
`rounded`	Border radius size	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`
`bold`	Whether to bold the font	`boolean`	`false`
`closable`	Whether it can be closed, showing a close icon when enabled	`boolean`	`false`
`disabled`	Whether to disable	`boolean`	`false`
`as`	Render as a specified tag	`string`	`'div'`

BrTag Events

Event name	Description	Callback parameter
`click`	Triggered when clicking the tag	`(event: MouseEvent) => void`
`close`	Triggered when clicking the close button	`(event: MouseEvent) => void`

BrTag Slots

Slot name	Description
`default`	Custom tag content
`icon`	Prefix icon slot
`closeIcon`	Custom close icon slot

BrTagGroup Props

Prop	Description	Type	Default
`gap`	Tag group spacing	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`
`wrap`	Whether to allow wrapping	`boolean`	`true`
`max`	Maximum display count, shows `+N` when exceeded	`number`	`-`

BrTagClose Props

Prop	Description	Type	Default
`class`	Custom class name	`any`	`-`

#Tag

#Component Features

#Basic Usage

#Variants

#Sizes

#Rounded Styles

#Bold Style

#Closable

#Tag Group with Overflow

#Theme Customization

#API

#BrTag Props

#BrTag Events

#BrTag Slots

#BrTagGroup Props

#BrTagClose Props

Tag