Tag

Maps to Arco Tag by color: info is neutral and other types use Arco status colors. See the Element Plus docs for props.

Colors & Effects

Light creates tinted tags, plain maps to bordered and dark uses solid colors.

primarysuccesswarningdangerinfo

primarysuccesswarningdangerinfo

primarysuccesswarningdangerinfo

<script setup lang="ts">
const effects = ['light', 'plain', 'dark'] as const
const types = ['primary', 'success', 'warning', 'danger', 'info'] as const
</script>

<template>
  <div style="width: 100%; display: grid; gap: 12px">
    <div v-for="effect in effects" :key="effect" style="display: flex; flex-wrap: wrap; gap: 12px">
      <el-tag v-for="type in types" :key="type" :type="type" :effect="effect">{{ type }}</el-tag>
    </div>
  </div>
</template>

Sizes & Closing

The three sizes match Arco small, medium and large; close buttons remove tags.

smalldefaultlargeClosable

<script setup lang="ts">
import { ref } from 'vue'
const sizes = ['small', 'default', 'large'] as const
const visible = ref(true)
</script>

<template>
  <el-tag v-for="size in sizes" :key="size" :size="size" type="info">{{ size }}</el-tag>
  <el-tag v-if="visible" closable @close="visible = false">Closable</el-tag>
  <el-button v-else @click="visible = true">Reset tag</el-button>
</template>

Checkable Tags

ElCheckTag maps to Arco's checkable tag.

SelectableNeutral

<script setup lang="ts">
import { ref } from 'vue'
const checked = ref(true)
const neutral = ref(false)
</script>

<template>
  <el-check-tag v-model:checked="checked">Selectable</el-check-tag>
  <el-check-tag v-model:checked="neutral" type="info">Neutral</el-check-tag>
</template>

Differences from Arco

• Close buttons use Element Plus icons with different strokes.