Thành phần huy hiệu

Cập nhật lần cuối: Tháng bảy 13, 2026

Huy hiệu CSS Tailwind chỉ dành cho CSS với các biến thể chính, phụ, trọng âm, thông tin, thành công, cảnh báo và lỗi. Kiểu dáng mềm mại, phác thảo và ma quái, kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

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ả
badge	Căn cứ	Small inline label
badge-outline	Phong cách	Transparent fill with colored border
badge-soft	Phong cách	Nền màu bị tắt tiếng
badge-ghost	Phong cách	Nền tinh tế không có viền
badge-dashed	Phong cách	Kiểu đường viền nét đứt
badge-pill	Phong cách	Hình dạng viên thuốc tròn hoàn toàn
badge-rounded	Phong cách	Làm tròn vừa phải
badge-circle	Phong cách	Equal-width circle for single characters or numbers
badge-square	Phong cách	Square with no rounding
badge-xs	Kích cỡ	Cực nhỏ
badge-sm	Kích cỡ	Bé nhỏ
badge-md	Kích cỡ	Trung bình (mặc định)
badge-lg	Kích cỡ	Lớn
badge-xl	Kích cỡ	Cực lớn
badge-2xl	Kích cỡ	2× extra large
badge-primary	Màu sắc	Màu chủ đề chính
badge-secondary	Màu sắc	Màu chủ đề phụ
badge-accent	Màu sắc	Màu chủ đề nhấn mạnh
badge-neutral	Màu sắc	Màu chủ đề trung tính
badge-info	Màu sắc	Màu sắc ngữ nghĩa thông tin
badge-success	Màu sắc	Màu ngữ nghĩa thành công
badge-warning	Màu sắc	Màu ngữ nghĩa cảnh báo
badge-error	Màu sắc	Lỗi ngữ nghĩa màu sắc

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

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

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

Xem mã

Badge Sizes

<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>

Xem mã

Badge Colors

<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>

Xem mã

Badge Styles

Soft Badges

<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>

Xem mã

Outline Badges

<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>

Xem mã

Dashed Badges

<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>

Xem mã

Ghost Badges

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

Xem mã

Badge Shapes

Rounded Badge

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

Xem mã

Pill Badge

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

Xem mã

Square Badge

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

Xem mã

Circle Badge

<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>

Xem mã

Badge Indicators

Empty badges are perfect for status indicators or notification dots.

<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>

Xem mã

Badge Composition

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

Badge with Icon

<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>

Xem mã

Badge Inside Button

<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>

Xem mã

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Huy hiệu chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP

Thành phần huy hiệu

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

Badge Sizes

Badge Colors

Badge Styles

Soft Badges

Outline Badges

Dashed Badges

Ghost Badges

Badge Shapes

Rounded Badge

Pill Badge

Square Badge

Circle Badge

Badge Indicators

Badge Composition

Badge with Icon

Badge Inside Button

Có liên quan