Tag

STag is a reusable chip: a compact label with an optional remove button. It is composed on top of SBadge (visuals) and SIcon (the cross). It is used on its own and as the tag element inside SInput (use-tags) and SSelect (use-tags).

Variants

Inherits the SBadge palette: the neutral and semantic variants.

NeutralPrimaryPositiveWarningNegative

<template>
  <STag variant="primary">Primary</STag>
  <STag variant="positive">Positive</STag>
  <STag variant="negative">Negative</STag>
</template>

Sizes and icon

size is sm or md; icon draws a leading icon (a registry name).

smmdFavorite

<template>
  <STag size="sm">sm</STag>
  <STag size="md">md</STag>
  <STag
    icon="star"
    variant="warning"
  >
    Favorite
  </STag>
</template>

Removal

The removable flag adds a cross button; clicking it emits the remove event. The button's accessible name comes from the locale dictionary (removeTag) or is set with the remove-label prop.

VueNuxtReka UI

<script setup lang="ts">
import { ref } from 'vue'

const chips = ref(['Vue', 'Nuxt', 'Reka UI'])
const removeChip = (t: string) => {
  chips.value = chips.value.filter((x) => x !== t)
}
</script>

<template>
  <STag
    v-for="t in chips"
    :key="t"
    removable
    variant="primary"
    @remove="removeChip(t)"
  >
    {{ t }}
  </STag>
</template>

Color

The color prop sets a color from the palette and overrides the variant color.

indigoblue-greysoft deep-purplecyan

<template>
  <STag
    variant="primary"
    color="indigo"
  >
    indigo
  </STag>
  <STag
    variant="positive"
    color="deep-purple"
  >
    soft deep-purple
  </STag>
</template>

API

Props

Name	Type	Default	Description
variant	| "primary" | "positive" | "negative" | "warning" | "neutral"	"neutral"	Color variant: neutral or semantic (primary/positive/warning/negative).
color	string	undefined	Accent color: a name from the palette (primary/teal/teal-10). Overrides the variant color.
text-color	string	undefined	Text/icon color on the fill: a name from the palette. White by default.
size	"md" | "sm" | "lg"	"md"	Size: sm, md, or lg.
square	boolean	undefined	Square corners: removes the rounding (rounded by default).
icon	string	undefined	Leading icon: a registry name or a raw SVG path.
removable	boolean	false	Shows a remove button (a cross). Emits remove on click.
remove-icon	string	"x"	Remove button icon: a registry name or a raw SVG path.
remove-label	string	undefined	Accessible name of the remove button (taken from the locale dictionary by default).

Events

Name	Signature	Description
remove	() => void	Click on the built-in remove button.

Slots

Name	Description
default	Tag content (text).
remove	Custom remove control instead of the built-in button, e.g. Reka TagsInputItemDelete when the tag is used inside an input.