---
title: "Tag"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Tag for content labels, categories, and filters. Multiple sizes, colors, and shapes for skill lists, article metadata, and product attributes."
url: https://frutjam.com/zh-hant/components/tag
---

# Tag Component

標籤組件顯示小的、帶標籤的信息，用於對內容進行分類、過濾或標記。標籤採用語意 HTML 和靈活的樣式構建，可協助使用者快速識別內容類型、狀態或類別。 Frutjam 標籤系統支援多種尺寸、顏色、樣式和形狀，非常適合技能清單、文章類別、狀態標籤和內容元資料。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級            | 類型  | 描述                  |
| ------------- | --- | ------------------- |
| tag           | 根據  | 用於分類或識別內容的內嵌標籤      |
| tag-outline   | 風格  | 帶有彩色邊框的透明填充         |
| tag-soft      | 風格  | 柔和的有色背景             |
| tag-square    | 風格  | 輕微四捨五入（小於預設藥丸）      |
| tag-remove    | 修飾符 | 標籤內的關閉/刪除按鈕         |
| tag-xs        | 尺寸  | 超小號（0.6875rem 字型）   |
| tag-sm        | 尺寸  | 小號（0.75rem 字型）      |
| tag-md        | 尺寸  | 中號（0.8125rem 字體，預設） |
| tag-lg        | 尺寸  | 大號（0.9375rem 字型）    |
| tag-xl        | 尺寸  | 超大（1rem字型）          |
| tag-primary   | 顏色  | 主要主題顏色              |
| tag-secondary | 顏色  | 次要主題色               |
| tag-accent    | 顏色  | 強調主題顏色              |
| tag-neutral   | 顏色  | 中性主題色               |
| tag-info      | 顏色  | 訊息語意顏色              |
| tag-success   | 顏色  | 成功語意色               |
| tag-warning   | 顏色  | 警告語意顏色              |
| tag-error     | 顏色  | 錯誤語意顏色              |

## 基本用法

## 標籤尺寸

```html
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>
```

## 標籤顏色

```html
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>
```

## 標籤樣式

```html
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>
```

## 標籤形狀

```html
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>
```

## 帶有圖標的標籤

```html
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>
```

## 可關閉標籤

```html
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>
```

## 標籤列表

```html
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>
```