---
title: "Badge"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Badge with solid, soft, outline, and ghost styles. Multiple sizes and semantic color variants for labels, statuses, and notification counts."
url: https://frutjam.com/vi/components/badge
---
# Badge Component
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
## Badge Sizes
```html
XsmallSmallMediumLargeXlarge2XLarge
```
## Badge Colors
```html
DefaultPrimarySecondaryAccentInfoSuccessWarningErrorNeutral
```
## Badge Styles
### Soft Badges
```html
DefaultPrimarySecondaryAccentInfoSuccessWarningErrorNeutral
```
### Outline Badges
```html
DefaultPrimarySecondaryAccentInfoSuccessWarningErrorNeutral
```
### Dashed Badges
```html
DefaultPrimarySecondaryAccentInfoSuccessWarningErrorNeutral
```
### Ghost Badges
```html
Ghost
```
## Badge Shapes
### Rounded Badge
```html
10
```
### Pill Badge
```html
Pill badge
```
### Square Badge
```html
99+
```
### Circle Badge
```html
```
## Badge Indicators
Empty badges are perfect for status indicators or notification dots.
```html
```
## Badge Composition
Integrate badges with icons or nest them inside other components like buttons.
### Badge with Icon
```html
Info
Success
Warning
Error
```
### Badge Inside Button
```html
```