El Tag

Tag Component

Tag component is used for marking and selection with various styles and themes.

When to Use

• Category labels
• Status tags
• Removable filters
• Selection markers

Basic Usage

<template>
  <el-tag>Tag 1</el-tag>
  <el-tag type="success">Tag 2</el-tag>
  <el-tag type="info">Tag 3</el-tag>
  <el-tag type="warning">Tag 4</el-tag>
  <el-tag type="danger">Tag 5</el-tag>
</template>

Removable Tag

<template>
  <el-tag
    v-for="tag in tags"
    :key="tag.name"
    closable
    @close="handleClose(tag)"
  >
    {{ tag.name }}
  </el-tag>
</template>

<script setup>
import { ref } from 'vue'

const tags = ref([
  { name: 'Tag 1' },
  { name: 'Tag 2' },
  { name: 'Tag 3' }
])

const handleClose = (tag) => {
  tags.value.splice(tags.value.indexOf(tag), 1)
}
</script>

Sizes

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

Theme

<template>
  <el-tag effect="dark">Dark</el-tag>
  <el-tag effect="light">Light</el-tag>
  <el-tag effect="plain">Plain</el-tag>
</template>

Rounded

<template>
  <el-tag round>Round Tag</el-tag>
</template>

Checkable Tag

<template>
  <el-check-tag :checked="checked" @change="onChange">Toggle Tag</el-check-tag>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(false)

const => {
  checked.value = value
}
</script>

API Reference

Tag Attributes

Tag Events

CheckTag Attributes

CheckTag Events

Best Practices

1. Use closable for removable tags
2. Use effect for different visual styles
3. Use el-check-tag for selectable tags