Badge

The Badge component is primarily used to highlight specific statuses, category labels, or numeric values.

It effectively captures user attention and is often used to mark new items, indicate unread messages, or display key supplementary information.

Basic Usage

Built-in rich preset colors to meet the visual differentiation needs of various business scenarios.

View Code

vue


<TBadge>Default</TBadge>
<TBadge color="blue">Blue</TBadge>
<TBadge color="azure">Azure</TBadge>
<TBadge color="indigo">Indigo</TBadge>
<TBadge color="purple">Purple</TBadge>
<TBadge color="pink">Pink</TBadge>
<TBadge color="red">Red</TBadge>
<TBadge color="orange">Orange</TBadge>
<TBadge color="yellow">Yellow</TBadge>
<TBadge color="lime">Lime</TBadge>
<TBadge color="green">Green</TBadge>
<TBadge color="teal">Teal</TBadge>
<TBadge color="cyan">Cyan</TBadge>
<TBadge color="dark">Dark</TBadge>
<TBadge color="light">Light</TBadge>

Using in Headings

Embedding badges in headings provides an intuitive way to mark important or new content.

Badges automatically adapt their size to match the current heading level (<h1> through <h6>).

View Code

vue


<h1>
  Example heading
  <TBadge>New</TBadge>
</h1>
<h2>
  Example heading
  <TBadge>New</TBadge>
</h2>
<h3>
  Example heading
  <TBadge>New</TBadge>
</h3>
<h4>
  Example heading
  <TBadge>New</TBadge>
</h4>
<h5>
  Example heading
  <TBadge>New</TBadge>
</h5>
<h6>
  Example heading
  <TBadge>New</TBadge>
</h6>

Light Variants

Append -lt to the preset color name to enable a light variant.

Light badges are a great choice when you need a softer, lower-saturation visual so they don't overpower the UI.

💡 Tip: -lt is typically short for "light", commonly used in frontend styles to indicate a light or low-saturation background.

View Code

vue


<TBadge color="default-lt">Default</TBadge>
<TBadge color="blue-lt">Blue</TBadge>
<TBadge color="azure-lt">Azure</TBadge>
<TBadge color="indigo-lt">Indigo</TBadge>
<TBadge color="purple-lt">Purple</TBadge>
<TBadge color="pink-lt">Pink</TBadge>
<TBadge color="red-lt">Red</TBadge>
<TBadge color="orange-lt">Orange</TBadge>
<TBadge color="yellow-lt">Yellow</TBadge>
<TBadge color="lime-lt">Lime</TBadge>
<TBadge color="green-lt">Green</TBadge>
<TBadge color="teal-lt">Teal</TBadge>
<TBadge color="cyan-lt">Cyan</TBadge>
<TBadge color="dark-lt">Dark</TBadge>
<TBadge color="light-lt">Light</TBadge>

Status Badges

Using semantic status colors (e.g., primary, success, danger) allows you to quickly convey the result of an operation or system status.

View Code

vue


<div class="badges-list">
  <TBadge color="primary">Primary</TBadge>
  <TBadge color="secondary">Secondary</TBadge>
  <TBadge color="success">Success</TBadge>
  <TBadge color="danger">Danger</TBadge>
  <TBadge color="warning">Warning</TBadge>
</div>
<br>
<div class="badges-list">
  <TBadge color="primary-lt">Primary</TBadge>
  <TBadge color="secondary-lt">Secondary</TBadge>
  <TBadge color="success-lt">Success</TBadge>
  <TBadge color="danger-lt">Danger</TBadge>
  <TBadge color="warning-lt">Warning</TBadge>
</div>

Pill Shape

Add the pill prop to turn the badge into a fully rounded capsule shape.

This is ideal for displaying numbers (e.g., unread message counts or notification dots). Its width automatically adjusts based on content length.

View Code

vue


<TBadge pill>Default</TBadge>
<TBadge pill color="blue">Blue</TBadge>
<TBadge pill color="azure">Azure</TBadge>
<TBadge pill color="indigo">Indigo</TBadge>
<TBadge pill color="purple">Purple</TBadge>
<TBadge pill color="pink">Pink</TBadge>
<TBadge pill color="red">Red</TBadge>
<TBadge pill color="orange">Orange</TBadge>
<TBadge pill color="yellow">Yellow</TBadge>
<TBadge pill color="lime">Lime</TBadge>
<TBadge pill color="green">Green</TBadge>
<TBadge pill color="teal">Teal</TBadge>
<TBadge pill color="cyan">Cyan</TBadge>
<TBadge pill color="dark">Dark</TBadge>
<TBadge pill color="light">Light</TBadge>

💡 Tip: Just like the red notification dots on WeChat or email icons, whether the number is 1 or 3 digits, it fits perfectly.

View Code

vue


<TBadge pill>0</TBadge>
<TBadge pill color="blue">1</TBadge>
<TBadge pill color="azure">2</TBadge>
<TBadge pill color="indigo">3</TBadge>
<TBadge pill color="purple">4</TBadge>
<TBadge pill color="pink">5</TBadge>
<TBadge pill color="red">6</TBadge>
<TBadge pill color="orange">7</TBadge>
<TBadge pill color="yellow">8</TBadge>
<TBadge pill color="lime">9</TBadge>
<TBadge pill color="green">10</TBadge>
<TBadge pill color="teal">101</TBadge>
<TBadge pill color="cyan">1001</TBadge>
<TBadge pill color="dark">10001</TBadge>
<TBadge pill color="light">100001</TBadge>

Outline Style

Use the outline prop to remove the background color while keeping the corresponding border. Suitable for scenarios on dark backgrounds or when a "ghost button" style is needed.

Icon Badges

Combining badges with icons enhances their expressive power, making them more vivid and intuitive visually.

View Code

vue


<TBadge color="blue">
  <IconHome size="14"/>
  Rent
</TBadge>
&nbsp;
<TBadge color="red">
  Fees
  <IconHome size="14"/>
</TBadge>

Using as a Link

Setting the href prop renders the badge as a clickable <a> tag.

This means you can add native attributes such as target="_blank".

View Code

vue


<TBadge href="#" color="default-lt">Default</TBadge>
<TBadge href="#" color="blue-lt">Blue</TBadge>
<TBadge href="#" color="azure-lt">Azure</TBadge>
<TBadge href="#" color="indigo-lt">Indigo</TBadge>
<TBadge href="#" color="purple-lt">Purple</TBadge>
<TBadge href="#" color="pink-lt">Pink</TBadge>
<TBadge href="#" color="red-lt">Red</TBadge>
<TBadge href="#" color="orange-lt">Orange</TBadge>
<TBadge href="#" color="yellow-lt">Yellow</TBadge>
<TBadge href="#" color="lime-lt">Lime</TBadge>
<TBadge href="#" color="green-lt">Green</TBadge>
<TBadge href="#" color="teal-lt">Teal</TBadge>
<TBadge href="#" color="cyan-lt">Cyan</TBadge>
<TBadge href="#" color="dark-lt">Dark</TBadge>
<TBadge href="#" color="light-lt">Light</TBadge>

Additionally, the component has deep integration with Vue Router.

After introducing routing in your project, simply configure the to prop for internal navigation.

vue


<TBadge to="/dashboard" color="blue-lt">Dashboard</TBadge>

Badges on Buttons

Badges are commonly used on buttons to display unread counts, new notifications, or status indicators.

By combining <TBadge> with a button and using positioning styles, you can easily achieve "top-right dot" or "counter badge" effects.

If you don't provide text content for the badge, it will display as a small dot — perfect for clean notification buttons.

💡 Add the blink prop and the badge will start blinking!

View Code

vue


<TButton>
  Notifications
  <TBadge color="red" notification>2</TBadge>
</TButton>
&nbsp;
<TButton>
  InBox
  <TBadge color="red" notification>4</TBadge>
</TButton>
&nbsp;
<TButton>
  Profile
  <TBadge color="red" notification></TBadge>
</TButton>
&nbsp;
<TButton>
  Profile
  <TBadge color="red" notification blink></TBadge>
</TButton>

Sizes

Use the size prop to freely adjust the badge size to fit different UI hierarchies.

vue


<TBadge color="blue" size="sm">SM</TBadge>
&nbsp;
<TBadge color="blue">DEFAULT</TBadge>
&nbsp;
<TBadge color="blue" size="lg">LG</TBadge>

Attribute Combinations

All the above appearance attributes (color, outline, pill, size) can be freely combined to meet complex and varied design requirements.

API

Props

Prop	Description	Type	Default
`color`	Badge color. Supports base colors (e.g., `blue`), light variants (append `-lt`), and semantic state colors (e.g., `primary`, `success`).	`string`	`undefined`
`pill`	Whether to apply the capsule shape (fully rounded). Great for wrapping numeric prompts.	`boolean`	`false`
`outline`	Whether to enable outline style (removes background, keeps border and text color).	`boolean`	`false`
`size`	Badge size. Options: `sm` (small) or `lg` (large). Omit for regular size.	`'sm' \| 'lg' \| undefined`	`undefined`
`href`	Link URL. When set, renders as a native `<a>` tag. Supports passthrough of native attributes like `target="_blank"`.	`string`	`undefined`
`notification`	Whether to use as a notification badge. When enabled, shrinks to a circle — suitable for "red dot" notifications (shows as a dot even without text).	`boolean`	`false`
`to`	Router navigation target. Deeply integrated with Vue Router; renders as a router link.	`string \| object`	`undefined`

Slots

Slot	Description
`default`	The default content slot inside the badge. Supports plain text, numbers, or icon components like `<Icon...>`.

Badge ​

Basic Usage ​

Using in Headings ​

Light Variants ​

Status Badges ​

Pill Shape ​

Outline Style ​

Icon Badges ​

Using as a Link ​

Badges on Buttons ​

Sizes ​

Attribute Combinations ​

API ​

Props ​

Slots ​

Badge

Basic Usage

Using in Headings

Light Variants

Status Badges

Pill Shape

Outline Style

Icon Badges

Using as a Link

Badges on Buttons

Sizes

Attribute Combinations

API

Props

Slots