Tags

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

Viwer Source

<template>
  <FielTags :value="'Tags 1'" />
  <FielTags :value="'Tags 2'" type="success" />
  <FielTags :value="'Tags 3'" type="info" />
  <FielTags :value="'Tags 4'" type="warning" />
  <FielTags :value="'Tags 5'" type="danger" />
</template>

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.

LargeDefaultSmall

Viwer Source

<template>
  <FielTags :value="'Default'" />
  <FielTags :value="'large'" size="large"/>
  <FielTags :value="'small'" size="small" />
</template>

Theme

Tag provide three different themes: dark、light and plain

Using effect to change, default is light

DarkTag 1Tag 2Tag 3Tag 4Tag 5Tag 1Tag 2Tag 3Tag 4Tag 5

LightTag 1Tag 2Tag 3Tag 4Tag 5Tag 1Tag 2Tag 3Tag 4Tag 5

PlainTag 1Tag 2Tag 3Tag 4Tag 5Tag 1Tag 2Tag 3Tag 4Tag 5

Viwer Source

<template>
  <FielTags
    v-for="item in items"
    :key="item.label"
    :type="item.type"
    class="mx-1"
    effect="dark"
    :value="item.label"
  />
  <FielTags
    v-for="item in items"
    :key="item.label"
    :type="item.type"
    class="mx-1"
    effect="light"
    :value="item.label"
  />
  <FielTags
    v-for="item in items"
    :key="item.label"
    :type="item.type"
    class="mx-1"
    effect="plain"
    :value="item.label"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from 'element-plus'

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>

<style>
.el-tag {
  margin: 5px;
}
</style>

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

Viwer Source

<template>
  <div class="flex flex-wrap gap-2 my-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
      round
      :value="item.label"
    />
  </div>
  <div class="flex flex-wrap gap-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="light"
      round
      :value="item.label"
    />
  </div>
  <div class="flex flex-wrap gap-2 my-2">
    <el-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="plain"
      round
      :value="item.label"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from 'element-plus'

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>

Props

Name	Description	Type	Mandatory
value	Binding Value.	String	True

Attributes

Name	Description	Type	Default
type	component type	String	—————
effect	component theme dark / light / plain	String	light
round	hether Tag is rounded	Boolean	False
size	size of Switch large / default / small	String	default

Example for Developer

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FielTags                      # Field Tags specific components.