跳至主要內容
Frutjam logo Frutjam
v2.2.2
Theme

Badge Component

CSS-only Tailwind CSS badge with primary, secondary, accent, info, success, warning, and error variants. Soft, outline, and ghost styles, sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

徽章組件是小型、緊湊的標籤，用於突出顯示、分類或顯示狀態資訊。徽章採用語義 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>