僅 CSS Tailwind CSS 徽章，包含主要、次要、重音、訊息、成功、警告和錯誤變體。柔和、輪廓和幻影樣式，尺寸為 xs-lg。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
徽章組件是小型、緊湊的標籤，用於突出顯示、分類或顯示狀態資訊。徽章採用語義 HTML 和 Tailwind CSS 構建，支援多種尺寸、顏色和样式，可靈活整合到表格、卡片、使用者設定檔和通知系統中。徽章重量輕且易於使用，可增強資訊層次結構，而不會增加視覺混亂。
僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
| 班級 | 類型 | 描述 |
|---|---|---|
| badge | 根據 | 小內嵌標籤 |
| badge-outline | 風格 | 帶有彩色邊框的透明填充 |
| badge-soft | 風格 | 柔和的有色背景 |
| badge-ghost | 風格 | 微妙的背景，無邊框 |
| badge-dashed | 風格 | 虛線邊框樣式 |
| badge-pill | 風格 | 全圓形藥丸形狀 |
| badge-rounded | 風格 | 適度舍入 |
| badge-circle | 風格 | 單一字元或數字的等寬圓圈 |
| badge-square | 風格 | 沒有四捨五入的正方形 |
| badge-xs | 尺寸 | 特小號 |
| badge-sm | 尺寸 | 小的 |
| badge-md | 尺寸 | 中（預設） |
| badge-lg | 尺寸 | 大的 |
| badge-xl | 尺寸 | 特大號 |
| badge-2xl | 尺寸 | 2×特大號 |
| badge-primary | 顏色 | 主要主題顏色 |
| badge-secondary | 顏色 | 次要主題色 |
| badge-accent | 顏色 | 強調主題顏色 |
| badge-neutral | 顏色 | 中性主題色 |
| badge-info | 顏色 | 訊息語意顏色 |
| badge-success | 顏色 | 成功語意色 |
| badge-warning | 顏色 | 警告語意顏色 |
| badge-error | 顏色 | 錯誤語意顏色 |
基本用法
Badge
<span class="badge">Badge</span> |
<span className="badge">Badge</span> |
徽章尺寸
Xsmall
Small
Medium
Large
Xlarge
2XLarge
html
1 2 3 4 5 6 | <span class="badge badge-xs">Xsmall</span> <span class="badge badge-sm">Small</span> <span class="badge badge-md">Medium</span> <span class="badge badge-lg">Large</span> <span class="badge badge-xl">Xlarge</span> <span class="badge badge-2xl">2XLarge</span> |
徽章顏色
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span> <span class="badge badge-success">Success</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span> <span class="badge badge-neutral">Neutral</span> |
徽章樣式
軟徽章
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-soft">Default</span> <span class="badge badge-soft badge-primary">Primary</span> <span class="badge badge-soft badge-secondary">Secondary</span> <span class="badge badge-soft badge-accent">Accent</span> <span class="badge badge-soft badge-info">Info</span> <span class="badge badge-soft badge-success">Success</span> <span class="badge badge-soft badge-warning">Warning</span> <span class="badge badge-soft badge-error">Error</span> <span class="badge badge-soft badge-neutral">Neutral</span> |
輪廓徽章
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-outline">Default</span> <span class="badge badge-outline badge-primary">Primary</span> <span class="badge badge-outline badge-secondary">Secondary</span> <span class="badge badge-outline badge-accent">Accent</span> <span class="badge badge-outline badge-info">Info</span> <span class="badge badge-outline badge-success">Success</span> <span class="badge badge-outline badge-warning">Warning</span> <span class="badge badge-outline badge-error">Error</span> <span class="badge badge-outline badge-neutral">Neutral</span> |
虛線徽章
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Neutral
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-dashed">Default</span> <span class="badge badge-dashed badge-primary">Primary</span> <span class="badge badge-dashed badge-secondary">Secondary</span> <span class="badge badge-dashed badge-accent">Accent</span> <span class="badge badge-dashed badge-info">Info</span> <span class="badge badge-dashed badge-success">Success</span> <span class="badge badge-dashed badge-warning">Warning</span> <span class="badge badge-dashed badge-error">Error</span> <span class="badge badge-dashed badge-neutral">Neutral</span> |
幽靈徽章
Ghost
html
<span class="badge badge-ghost">Ghost</span> |
徽章形狀
圓形徽章
10
html
<span class="badge badge-error badge-rounded">10</span> |
藥丸徽章
Pill badge
html
<span class="badge badge-warning badge-pill">Pill badge</span> |
方形徽章
99+
html
<span class="badge badge-neutral badge-square">99+</span> |
圓形徽章
html
1 2 3 | <span class="badge badge-success badge-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> </span> |
徽章指示器
空徽章非常適合狀態指示燈或通知點。
html
1 2 3 4 5 | <span class="badge badge-primary badge-circle badge-lg"></span> <span class="badge badge-primary badge-lg"></span> <span class="badge badge-primary badge-md"></span> <span class="badge badge-primary badge-sm"></span> <span class="badge badge-primary badge-xs"></span> |
徽章組成
將徽章與圖示整合或將它們嵌套在按鈕等其他組件中。
帶有圖標的徽章
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="badge badge-info"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Info </span> <span class="badge badge-success"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m9 12 2 2 4-4"></path> </svg> Success </span> <span class="badge badge-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Warning </span> <span class="badge badge-error"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.9 4.9 14.2 14.2"></path> </svg> Error </span> |
徽章內按鈕
html
1 2 3 4 5 6 7 8 | <button class="btn btn-primary btn-sm btn-active"> Message <span class="badge badge-primary badge-xs">+49</span> </button> <button class="btn btn-sm"> Inbox <span class="badge badge-xs badge-primary">+27</span> </button> |
使用 Claude Code、Cursor 或其他 AI 編輯器？
Cherry MCP 為您的 AI 編輯器按需提供準確的 徽章 類別名稱和結構。不再有幻覺課程。