Tag

Short labels for marking and categorization, with optional close button.

Basic Usage

VueReactSvelte

<ATag>Vue</ATag>
<ATag>React</ATag>
<ATag>Svelte</ATag>

Closable

VueReactSvelte

<script setup>
import { ref } from 'vue'
const tags = ref(['Vue', 'React', 'Svelte'])
</script>

<ATag
  v-for="tag in tags"
  :key="tag"
  closable
  @close="tags = tags.filter(t => t !== tag)"
>
  {{ tag }}
</ATag>

API

Props

Name	Type	Default	Description
closable	boolean	false	Show close button
disabled	boolean	false	Disabled

Emits

Name	Parameters	Description
close	—	Triggered after close animation completes

Slots

Name	Description
default	Tag text content

Interaction

• Close animation: scale(0.85) + opacity(0) fade out
• Duration 220ms, matching --duration-base