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>