Tag Component
CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
標籤組件顯示小的、帶標籤的信息，用於對內容進行分類、過濾或標記。標籤採用語意 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 | 顏色 | 錯誤語意顏色 |
基本用法
Tag
Another tag
Third tag
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
標籤尺寸
Extra Small
Small
Medium
Large
html
1 2 3 4 | <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> |
標籤顏色
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 | <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> |
標籤樣式
Default
Outline
Soft
Dashed
html
1 2 3 4 | <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> |
標籤形狀
Square
Rounded
Pill
C
html
1 2 3 4 | <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> |
帶有圖標的標籤
Starred
html
1 2 3 4 | <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> |
可關閉標籤
JavaScript
React
TypeScript
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
標籤列表
JavaScript
React
CSS
UI Design
Frontend
Production
html
1 2 3 4 5 6 7 8 | <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> |