Tag

A label for an active filter, a keyword or a selected value. It can have an icon and a remove button.

For a simple indicator (status, count), use Badge.

Usage

Variants

<SuTag label="Approved" variant="success" />

Removable

The remove button is named "Remove {label}" and emits remove.

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

const filters = ref(['Paris', 'Under $500', 'Free shipping'])
const remove = (filter) => (filters.value = filters.value.filter((f) => f !== filter))
</script>

<template>
  <SuTag v-for="filter in filters" :key="filter" :label="filter" removable @remove="remove(filter)" />
</template>

Sizes

<SuTag size="sm" label="Small" removable />

API

Props

Prop	Type	Default	Description
label	string	-	Label (or default slot)
variant	'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'	'default'	Variant
size	'sm' | 'md' | 'lg'	'md'	Size
icon	Component	-	Icon before the label
removable	boolean	false	Remove button
removeLabel	string	'Remove {label}' (locale)	Remove button name
disabled	boolean	false	Disables the tag

Events

Event	Payload	Description
remove	MouseEvent	Remove button clicked

Accessibility

• The remove button is a real <button>, named with the tag label (read from the slot when the label prop is missing).
• After a removal, move focus somewhere sensible (next tag, filter field): the removed button takes focus with it.
• State tints use the --su-state-*-fg tokens, readable on their soft background.