Tag

Used for marking and selection.

Basic usage

Use the type attribute to define Tag's type. In addition, the color attribute can be used to set the background color of the Tag.

Tag 1Tag 2Tag 3Tag 4Tag 5

---

<template>
  <b-tag type="blue">Tag 1</b-tag>
  <b-tag class="ml-2" type="green">Tag 2</b-tag>
  <b-tag class="ml-2" type="teal">Tag 3</b-tag>
  <b-tag class="ml-2" type="yellow">Tag 4</b-tag>
  <b-tag class="ml-2" type="red">Tag 5</b-tag>
</template>

Removable Tag

closable attribute can be used to define a removable tag. It accepts a Boolean. By default the removal of Tag has a fading animation. If you don't want to use it, you can set the disable-transitions attribute, which accepts a Boolean, to true. close event triggers when Tag is removed.

Tag 1Tag 2Tag 3Tag 4Tag 5

---

<template>
  <b-tag
    v-for="tag in tags"
    :key="tag.name"
    class="mx-1"
    closable
    :type="tag.type"
  >
    {{ tag.name }}
  </b-tag>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tags = ref([
  { name: 'Tag 1', type: '' },
  { name: 'Tag 2', type: 'success' },
  { name: 'Tag 3', type: 'info' },
  { name: 'Tag 4', type: 'warning' },
  { name: 'Tag 5', type: 'danger' },
])
</script>

Edit Dynamically

You can use the close event to add and remove tag dynamically.

Tag 1Tag 2Tag 3

---

<template>
  <div>
    <b-tag
      v-for="tag in dynamicTags"
      :key="tag"
      class="mx-1"
      closable
      :disable-transitions="false"
      @close="handleClose(tag)"
    >
      {{ tag }}
    </b-tag>
    <b-input
      v-if="inputVisible"
      ref="InputRef"
      v-model="inputValue"
      class="ml-1 w-20"
      small
      @keyup.enter="handleInputConfirm"
      @blur="handleInputConfirm"
    />
    <b-button v-else class="ml-1" small @click="showInput">
      + New Tag
    </b-button>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue'
import { BInput } from 'bigin-ui'

const inputValue = ref('')
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof BInput>>()

const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}

const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value.replace(',', ''))
  }
  inputVisible.value = false
  inputValue.value = ''
}
</script>

Tag Input

Tag input

Enter new item end with comma (,)

Value must contains @

---

<template>
  <b-form-item
    label="Tag input"
    topless
    :error="errorMessage"
    help-text="Value must contains @"
  >
    <b-tag-input
      v-model="dynamicTags"
      :validator="validator"
      @error="handleError"
    />
  </b-form-item>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dynamicTags = ref([])
const errorMessage = ref('')

const validator = (value: string) => value.includes('@')

const handleError = (message: string) => {
  if (message === 'validation') {
    errorMessage.value = 'Invalid format'
  } else if (message === 'duplicate') {
    errorMessage.value = 'Item existed'
  } else if (message === 'required') {
    errorMessage.value = 'Item is empty'
  } else {
    errorMessage.value = ''
  }
}
</script>

Sizes

Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.

Use attribute size to set additional sizes with large, default or small.

Large

Default

Small

Large

Default

Small

---

<template>
  <b-space>
    <b-tag size="large">Large</b-tag>
    <b-tag>Default</b-tag>
    <b-tag size="small">Small</b-tag>
  </b-space>

  <b-space class="mt-4">
    <b-tag size="large" closable>Large</b-tag>
    <b-tag closable>Default</b-tag>
    <b-tag size="small" closable>Small</b-tag>
  </b-space>
</template>

Theme

Tag provide three different themes: dark、light and plain

Using effect to change, default is light

Dark

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Closable

Light

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Closable

Plain

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Closable

---

<template>
  <b-space wrap>
    <p class="w-40px">Dark</p>
    <b-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
    >
      {{ item.label }}
    </b-tag>
    <b-tag type="blue" effect="dark" closable> Closable </b-tag>
  </b-space>
  <b-space wrap class="mt-4">
    <p class="w-40px">Light</p>
    <b-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </b-tag>
    <b-tag type="blue" effect="light" closable> Closable </b-tag>
  </b-space>
  <b-space wrap class="mt-4">
    <p class="w-40px">Plain</p>
    <b-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </b-tag>
    <b-tag type="blue" effect="plain" closable> Closable </b-tag>
  </b-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from 'bigin-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'blue', label: 'Tag 1' },
  { type: 'teal', label: 'Tag 2' },
  { type: 'green', label: 'Tag 3' },
  { type: 'orange', label: 'Tag 4' },
  { type: 'red', label: 'Tag 5' },
])
</script>

Rounded

Tag can also be rounded like button.

Tag 1Tag 2Tag 3Tag 4Tag 5

Tag 1Tag 2Tag 3Tag 4Tag 5

Tag 1Tag 2Tag 3Tag 4Tag 5

---

<template>
  <div class="flex flex-wrap gap-2">
    <b-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
      round
    >
      {{ item.label }}
    </b-tag>
  </div>
  <div class="flex flex-wrap gap-2 my-3">
    <b-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
      round
    >
      {{ item.label }}
    </b-tag>
  </div>
  <div class="flex flex-wrap gap-2">
    <b-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
      round
    >
      {{ item.label }}
    </b-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from 'bigin-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: '', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'danger', label: 'Tag 4' },
  { type: 'warning', label: 'Tag 5' },
])
</script>

Attributes

Name	Description	Type	Accepted Values	Default
type	component type	string	primary / red / green / blue / teal / orange / yellow	—
closable	whether Tag can be removed	boolean	—	false
disable-transitions	whether to disable animations	boolean	—	false
hit	whether Tag has a highlighted border	boolean	—	false
color	background color of the Tag	string	—	—
size	tag size	string	large / default / small	default
effect	component theme	string	dark / light / plain	light
round	whether Tag is rounded	boolean	—	false

Events

Name	Description	Parameters
click	triggers when Tag is clicked	—
close	triggers when Tag is removed	—

Slots

Name	Description
—	customize default content

CheckTag Attributes

Name	Description	Type	Accepted Values	Default
checked	is checked	boolean	true / false	—

CheckTag Events

Name	Description	Parameters
change	triggers when Check Tag is clicked	checked

CheckTag Slots

Name	Description
—	customize default content

Tag Input Attributes

Name	Description	Type	Accepted Values	Default
v-model	value	string[]	—	—
commitKey	commit new item when press this key	string	, (comma)	false
tab-index	must set >= 0 to show blinking cursor	number	0	false
placeholder	show when model value is empty	string	—	false
validator	function to make sure new item has valid format	function	(value: string) => boolean	—
size	tag size	string	large / default / small	default
round	whether Tag is rounded	boolean	—	false

Tag Input Events

Name	Description	Parameters
error	triggers when has error when adding new item	type: 'none' / 'duplicate' / 'validation' / 'required'