Tag

Basic Usage

Simply use the default slot.

defaultprimarysuccessinfowarningdanger

<template>
  <div>
    <b-tag>default</b-tag>
    <b-tag type="primary">primary</b-tag>
    <b-tag type="success">success</b-tag>
    <b-tag type="info">info</b-tag>
    <b-tag type="warning">warning</b-tag>
    <b-tag type="danger">danger</b-tag>
  </div>
</template>

Multiple Colors

Use the dark property to set dark mode, and you can set tags with more color types

defaultprimarysuccessinfowarningdangermagentaredvolcanoorangegoldcyanbluegeekbluepurple

<template>
  <div>
    <b-tag>default</b-tag>
    <b-tag type="primary" dark>primary</b-tag>
    <b-tag type="success" dark>success</b-tag>
    <b-tag type="info" dark>info</b-tag>
    <b-tag type="warning" dark>warning</b-tag>
    <b-tag type="danger" dark>danger</b-tag>
    <b-tag type="magenta">magenta</b-tag>
    <b-tag type="red">red</b-tag>
    <b-tag type="volcano">volcano</b-tag>
    <b-tag type="orange">orange</b-tag>
    <b-tag type="gold">gold</b-tag>
    <b-tag type="cyan">cyan</b-tag>
    <b-tag type="blue">blue</b-tag>
    <b-tag type="geekblue">geekblue</b-tag>
    <b-tag type="purple">purple</b-tag>
  </div>
</template>

Selectable Tag

Set the checkable property to define whether a tag is selectable.

primarysuccessinfowarningdangermagentaredvolcanoorangegoldcyanbluegeekbluepurple

primarysuccessinfowarningdangermagentaredvolcanoorangegoldcyanbluegeekbluepurple

<template>
  <div>
    <div class="mb-10">
      <b-tag type="primary" dark checkable><span>primary</span></b-tag>
      <b-tag type="success" dark checkable>success</b-tag>
      <b-tag type="info" dark checkable>info</b-tag>
      <b-tag type="warning" dark checkable>warning</b-tag>
      <b-tag type="danger" dark checkable>danger</b-tag>
      <b-tag type="magenta" dark checkable>magenta</b-tag>
      <b-tag type="red" dark checkable>red</b-tag>
      <b-tag type="volcano" dark checkable>volcano</b-tag>
      <b-tag type="orange" dark checkable>orange</b-tag>
      <b-tag type="gold" dark checkable>gold</b-tag>
      <b-tag type="cyan" dark checkable>cyan</b-tag>
      <b-tag type="blue" dark checkable>blue</b-tag>
      <b-tag type="geekblue" dark checkable>geekblue</b-tag>
      <b-tag type="purple" dark checkable>purple</b-tag>
    </div>
    <div>
      <b-tag type="primary" checkable><span>primary</span></b-tag>
      <b-tag type="success" checkable>success</b-tag>
      <b-tag type="info" checkable>info</b-tag>
      <b-tag type="warning" checkable>warning</b-tag>
      <b-tag type="danger" checkable>danger</b-tag>
      <b-tag type="magenta" checkable>magenta</b-tag>
      <b-tag type="red" checkable>red</b-tag>
      <b-tag type="volcano" checkable>volcano</b-tag>
      <b-tag type="orange" checkable>orange</b-tag>
      <b-tag type="gold" checkable>gold</b-tag>
      <b-tag type="cyan" checkable>cyan</b-tag>
      <b-tag type="blue" checkable>blue</b-tag>
      <b-tag type="geekblue" checkable>geekblue</b-tag>
      <b-tag type="purple" checkable>purple</b-tag>
    </div>
  </div>
</template>

Removable Tag

Set the closable property to define whether a tag is removable.

Tab 1Tab 2Tab 3Tab 4tag五

<template>
  <div>
    <b-tag type="primary" closable>Tab 1</b-tag>
    <b-tag type="success" closable>Tab 2</b-tag>
    <b-tag type="info" closable>Tab 3</b-tag>
    <b-tag type="warning" closable>Tab 4</b-tag>
    <b-tag type="danger" closable>tag五</b-tag>
  </div>
</template>

Dot Mode

Set dot mode to simply display content with a small indicator dot

defaultprimarysuccessinfowarningdangermagentaredvolcanoorangegoldcyanbluegeekbluepurple

<template>
  <div>
    <b-tag type="default" dot><span>default</span></b-tag>
    <b-tag type="primary" dot><span>primary</span></b-tag>
    <b-tag type="success" dot>success</b-tag>
    <b-tag type="info" dot>info</b-tag>
    <b-tag type="warning" dot>warning</b-tag>
    <b-tag type="danger" dot>danger</b-tag>
    <b-tag type="magenta" dot>magenta</b-tag>
    <b-tag type="red" dot>red</b-tag>
    <b-tag type="volcano" dot>volcano</b-tag>
    <b-tag type="orange" dot>orange</b-tag>
    <b-tag type="gold" dot>gold</b-tag>
    <b-tag type="cyan" dot>cyan</b-tag>
    <b-tag type="blue" dot>blue</b-tag>
    <b-tag type="geekblue" dot>geekblue</b-tag>
    <b-tag type="purple" dot>purple</b-tag>
  </div>
</template>

Dynamictag

Tag OneTag TwoTag Three

<template>
  <div>
    <b-button class="button-new-tag" size="small" icon="plus" @click="addOne">New Tag</b-button>
    <p>
      <b-tag
        v-for="tag in data.dynamicTags"
        :key="tag"
        type="primary"
        closable
        @close="handleCloseTag(tag)"
      >
        {{ tag }}
      </b-tag>
    </p>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from 'vue'
const data = reactive({
  dynamicTags: ['Tag One', 'Tag Two', 'Tag Three'],
  count: 0
})
const handleCloseTag = (tag: string) => {
  data.dynamicTags.splice(data.dynamicTags.indexOf(tag), 1)
}
const addOne = () => {
  data.count++
  data.dynamicTags.push('new tag' + data.count)
}
</script>

Custom Styles

Multiple customizable style options are available

Custom ColorNo BorderStyleDefault

<template>
  <div>
    <b-tag color="#ffa2d3">Custom Color</b-tag>
    <b-tag type="primary" no-border font-size="14px">No Border</b-tag>
    <b-tag :tag-style="{ backgroundColor: '#5AFAFC', color: '#606266' }">Style</b-tag>
    <b-tag closable>Default</b-tag>
  </div>
</template>

Props

Parameter	Description	Type	Options	Default
closable	Whether it can be dismissed	Boolean	—	false
type	Theme	String	success/info/warning/danger	—
dot	Whether to show as a small dot	Boolean	—	false
no-border	Disable border	Boolean	—	false
color	Background color (customizable)	String	—	—
fontSize	Font size	String	—	—
tag-style	Tag style (full control, avoid setting if possible)	String	—	—
checkable	Whether it can be selected	Boolean	—	false
modelValue	Selection state, use v-model for two-way binding	Boolean	—	true

Events

Event Name	Description	Return Value
close	Close event callback	event
click	Click event callback	event
change	Selection event callback, the name value must be set as the second parameter	checked,name