Chuyển đến nội dung chính
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.

Badge components are small, compact labels used to highlight, categorize, or display status information. Built with semantic HTML and Tailwind CSS, badges support multiple sizes, colors, and styles for flexible integration into tables, cards, user profiles, and notification systems. Lightweight and accessible, badges enhance information hierarchy without adding visual clutter.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp học Kiểu Sự miêu tả
badgeCăn cứSmall inline label
badge-outlinePhong cáchTransparent fill with colored border
badge-softPhong cáchNền màu bị tắt tiếng
badge-ghostPhong cáchNền tinh tế không có viền
badge-dashedPhong cáchKiểu đường viền nét đứt
badge-pillPhong cáchHình dạng viên thuốc tròn hoàn toàn
badge-roundedPhong cáchLàm tròn vừa phải
badge-circlePhong cáchEqual-width circle for single characters or numbers
badge-squarePhong cáchSquare with no rounding
badge-xsKích cỡCực nhỏ
badge-smKích cỡBé nhỏ
badge-mdKích cỡTrung bình (mặc định)
badge-lgKích cỡLớn
badge-xlKích cỡCực lớn
badge-2xlKích cỡ2× extra large
badge-primaryMàu sắcMàu chủ đề chính
badge-secondaryMàu sắcMàu chủ đề phụ
badge-accentMàu sắcMàu chủ đề nhấn mạnh
badge-neutralMàu sắcMàu chủ đề trung tính
badge-infoMàu sắcMàu sắc ngữ nghĩa thông tin
badge-successMàu sắcMàu ngữ nghĩa thành công
badge-warningMàu sắcMàu ngữ nghĩa cảnh báo
badge-errorMàu sắcLỗi ngữ nghĩa màu sắc

Cách sử dụng cơ bản

Badge 
<span class="badge">Badge</span>

<span className="badge">Badge</span>

Badge Sizes

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>

Badge Colors

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>

Badge Styles

Soft Badges

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>

Outline Badges

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>

Dashed Badges

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 Badges

Ghost
html 
<span class="badge badge-ghost">Ghost</span>

Badge Shapes

Rounded Badge

10
html 
<span class="badge badge-error badge-rounded">10</span>

Pill Badge

Pill badge
html 
<span class="badge badge-warning badge-pill">Pill badge</span>

Square Badge

99+
html 
<span class="badge badge-neutral badge-square">99+</span>

Circle Badge

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>

Badge Indicators

Empty badges are perfect for status indicators or notification dots.

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>

Badge Composition

Integrate badges with icons or nest them inside other components like buttons.

Badge with Icon

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>

Badge Inside Button

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>