Tag

A removable or clickable label used for user-selected categories, filters, or metadata annotations.

ExamplesCodeUsageChangelog

Basic

Release 1.0

Tailwind v4

<Tag text="Release 1.0" />

Colors

StandardBlueGreenTealPurpleRedYellowOrange

Tailwind v4

<Tag text="Standard" color="standard" />
<Tag text="Blue" color="blue" />
<Tag text="Green" color="green" />
<Tag text="Teal" color="teal" />
<Tag text="Purple" color="purple" />
<Tag text="Red" color="red" />
<Tag text="Yellow" color="yellow" />
<Tag text="Orange" color="orange" />

Removable

When isRemovable is true, a × button is rendered. Listen to the remove event to handle removal.

FrontendDesignAPI

Tailwind v4

<script setup>
import { ref } from 'vue'
const tags = ref(['Frontend', 'Design', 'API'])
</script>

<template>
  <Tag
    v-for="tag in tags"
    :key="tag"
    :text="tag"
    :is-removable="true"
    @remove="tags = tags.filter(t => t !== tag)"
  />
</template>

With link

When href is provided, the tag text becomes a navigable anchor.

View docs

Tailwind v4

<Tag text="View docs" color="blue" href="/components/tag" />

Props

Prop	Type	Default	Description
text	string	—	Tag label (required)
color	'standard' | 'blue' | 'green' | 'teal' | 'purple' | 'red' | 'yellow' | 'orange'	'standard'	Color scheme
isRemovable	boolean	false	Show a × remove button
href	string	—	If provided, tag text renders as a link

Emits

Event	Payload	Description
remove	—	Fired when the × button is clicked