Tag

Tag is used for marking, categorizing, or displaying status. TechUI's Tag component features a built-in flexible Tone System, which can adapt to various UI scenarios ranging from high-intensity highlights to low-key auxiliary information.

Basic Usage

The most basic usage of a tag involves using the type property to control the semantic color. The default is the base tone.

<template>
  <div class="demo-gap">
    <TuiTag>Default</TuiTag>
    <TuiTag type="primary">Primary</TuiTag>
    <TuiTag type="success">Success</TuiTag>
    <TuiTag type="warning">Warning</TuiTag>
    <TuiTag type="danger">Danger</TuiTag>
    <TuiTag type="info">Info</TuiTag>
    <TuiTag type="invert">Invert</TuiTag>
  </div>
</template>

Visual Tones

TuiTag provides three preset visual intensities controlled by the tone property to suit different information hierarchies.

Base Tone (Base)

Default value. A balanced visual style, usually appearing as a light background with dark text or an outlined style. Suitable for conventional information display.

<TuiTag type="primary" tone="base">Base</TuiTag>

Strong Tone (Strong)

High saturation. Uses a solid background color (Solid Color) and white text. It has a strong visual impact and is suitable for emphasizing important statuses or markings that need to attract attention.

<template>
  <TuiTag type="primary" tone="strong">Primary</TuiTag>
  <TuiTag type="success" tone="strong">Success</TuiTag>
  <TuiTag type="danger" tone="strong">Danger</TuiTag>
</template>

Weak Tone (Weak)

Low saturation/Ghost style. The background is extremely light or transparent, retaining only the text color. Suitable for use in information-dense lists to avoid overwhelming other content.

<template>
  <TuiTag type="primary" tone="weak">Primary</TuiTag>
  <TuiTag type="warning" tone="weak">Warning</TuiTag>
</template>

Shape and Size

Round

Set the round property to turn the tag into a capsule shape.

<TuiTag type="primary" round>Round Tag</TuiTag>

Size

Supports three sizes: large, default, and small.

<template>
  <TuiTag size="small">Small</TuiTag>
  <TuiTag size="default">Default</TuiTag>
  <TuiTag size="large">Large</TuiTag>
</template>

Custom Color

When built-in theme colors do not meet your requirements, you can pass any CSS color value via the customColor property. The component will automatically calculate the light and dark variants of that color to adapt to strong or weak modes.

<template>
  <TuiTag :customColor="'#722ed1'">Purple</TuiTag>
  
  <TuiTag :customColor="'#ff00ff'" tone="strong">Magenta Strong</TuiTag>
</template>

API Reference

Props

Property Name	Type	Default Value	Description
type	String	'default'	Semantic type. Options: default, invert, primary, success, warning, danger, info, emphasis.
tone	String	'base'	Visual tone. Options: base (Standard), strong (Strong/Solid), weak (Weak/Light).
size	String	'default'	Size. Options: default, small, large.
round	Boolean	false	Whether it is fully rounded (capsule-shaped).
customColor	String/Array	null	Custom color. Supports CSS color strings; the component will automatically generate the corresponding background and text colors.

Slots

Slot Name	Description
default	The text content of the tag.