Tag

Tags are used for labelling, categorizing, or representing status. Supports themes, variants, sizes, close buttons, and custom colors. YueCheckTag is the selectable variant for multi-select filter scenarios.

Full API at API reference. Design decisions at Guide.

Basic

Basic

Default tag

<YueTag>Default tag</YueTag>

Theme

Theme

DefaultPrimarySuccessWarningDanger

<YueTag theme="default">Default</YueTag>
<YueTag theme="primary">Primary</YueTag>
<YueTag theme="success">Success</YueTag>
<YueTag theme="warning">Warning</YueTag>
<YueTag theme="danger">Danger</YueTag>

Variant

Variants (primary theme)

FilledTintOutlineTint-Outline

<YueTag theme="primary" variant="filled">Filled</YueTag>
<YueTag theme="primary" variant="tint">Tint</YueTag>
<YueTag theme="primary" variant="outline">Outline</YueTag>
<YueTag theme="primary" variant="tint-outline">Tint-Outline</YueTag>

Theme × Variant matrix

5 themes × 4 variants

defaultdefaultdefaultdefault

primaryprimaryprimaryprimary

successsuccesssuccesssuccess

warningwarningwarningwarning

dangerdangerdangerdanger

<!-- 5 themes × 4 variants -->
<template v-for="theme in themes" :key="theme">
  <YueTag v-for="variant in variants" :key="variant"
    :theme="theme" :variant="variant">
    {{ theme }}
  </YueTag>
</template>

Size

Size

SmallMediumLarge

<YueTag size="sm">Small</YueTag>
<YueTag size="md">Medium</YueTag>
<YueTag size="lg">Large</YueTag>

Shape

Shape

SquareRound

<YueTag theme="primary" shape="square">Square</YueTag>
<YueTag theme="primary" shape="round">Round</YueTag>

Closable

Closable

ClosablePrimaryDanger

<YueTag closable @close="onClose">Closable</YueTag>
<YueTag theme="primary" closable @close="onClose">Primary</YueTag>
<YueTag theme="danger" closable @close="onClose">Danger</YueTag>

Disabled

Disabled

DisabledDisabledNo close

<YueTag disabled>Disabled</YueTag>
<YueTag theme="primary" disabled>Disabled</YueTag>
<YueTag closable disabled>No close</YueTag>

Clickable (tag="button")

Use tag="button" to give a tag full keyboard and pointer interaction semantics. The @click listener works on any tag, but <button> is the right element when a tag triggers an action.

Clickable

<YueTag tag="button" theme="primary" @click="onFilter">Clickable</YueTag>
<YueTag tag="button" @click="onFilter">Default</YueTag>
<YueTag tag="button" theme="success" @click="onFilter">Success</YueTag>

Max-width truncation

Max-width truncation

This is a very long tag labelThis label gets truncated at max-width

<YueTag :max-width="80">This is a very long tag label</YueTag>
<YueTag theme="primary" :max-width="120">This label gets truncated at max-width</YueTag>

Icon slot

Icon

With icon

<YueTag theme="primary">
  <template #icon><IconTag :size="12" /></template>
  With icon
</YueTag>

Custom color

Pass any valid CSS color. The component derives text and background from the luminance of the value.

Custom color

Custom purpleSky tintAmber outlineGreen tint-outline

<YueTag color="#7c3aed">Custom purple</YueTag>
<YueTag color="#0ea5e9" variant="tint">Sky tint</YueTag>
<YueTag color="#f59e0b" variant="outline">Amber outline</YueTag>
<YueTag color="#10b981" variant="tint-outline">Green tint-outline</YueTag>

CheckTag

YueCheckTag is a role="checkbox" element with v-model controlled and defaultChecked uncontrolled modes.

CheckTag basic

VueReactAngular (disabled)

<YueCheckTag v-model="selected1">Vue</YueCheckTag>
<YueCheckTag v-model="selected2">React</YueCheckTag>
<YueCheckTag v-model="selected3" disabled>Angular (disabled)</YueCheckTag>

CheckTag filter group

Multi-select filter

VueReactSvelteSolid

<YueCheckTag
  v-for="tag in tags"
  :key="tag.value"
  v-model="tag.checked"
  @change="onTagChange"
>{{ tag.label }}</YueCheckTag>

Selected state and theme

Unselected it is a neutral chip; selected it uses the palette named by theme (default primary). The four below are really rendered, and verify that the selected palette follows the theme and that hover only emphasises the existing background.

primarysuccesswarningdanger

Variant and theme matrix (live)

Every tag below is really rendered: four variants × four themes. The gate asserts >= 4.5:1 text contrast for each in both light and dark, and that the four themes within a variant paint distinct colours (a theme-ignoring stylesheet fails).

filled

primarysuccesswarningdanger

tint

primarysuccesswarningdanger

outline

primarysuccesswarningdanger

tint-outline

primarysuccesswarningdanger