僅 CSS Tailwind CSS 標籤（晶片），具有色彩變體、柔和的風格和可移動按鈕。尺寸為 xs-lg。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
標籤組件顯示小的、帶標籤的信息，用於對內容進行分類、過濾或標記。標籤採用語意 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> |
使用 Claude Code、Cursor 或其他 AI 編輯器？
Cherry MCP 為您的 AI 編輯器按需提供準確的 標籤 類別名稱和結構。不再有幻覺課程。