---
title: "Tag"
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 Tag for content labels, categories, and filters. Multiple sizes, colors, and shapes for skill lists, article metadata, and product attributes."
url: https://frutjam.com/vi/components/tag
---

# Tag Component

Các thành phần thẻ hiển thị các mẩu thông tin nhỏ, được gắn nhãn, được sử dụng để phân loại, lọc hoặc gắn nhãn nội dung. Được xây dựng bằng HTML ngữ nghĩa và kiểu dáng linh hoạt, thẻ giúp người dùng nhanh chóng xác định loại nội dung, trạng thái hoặc danh mục. Hệ thống thẻ Frutjam hỗ trợ nhiều kích thước, màu sắc, kiểu dáng và hình dạng—lý tưởng cho danh sách kỹ năng, danh mục bài viết, nhãn trạng thái và siêu dữ liệu nội dung.

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ả                                         |
| ------------- | --------------- | -------------------------------------------------- |
| tag           | Căn cứ          | Nhãn nội tuyến để phân loại hoặc xác định nội dung |
| tag-outline   | Phong cách      | Tô màu trong suốt với đường viền màu               |
| tag-soft      | Phong cách      | Nền màu bị tắt tiếng                               |
| tag-square    | Phong cách      | Làm tròn nhẹ (ít hơn viên thuốc mặc định)          |
| tag-remove    | Công cụ sửa đổi | Nút loại bỏ/xóa bên trong thẻ                      |
| tag-xs        | Kích cỡ         | Cực nhỏ (phông chữ 0,6875rem)                      |
| tag-sm        | Kích cỡ         | Nhỏ (phông chữ 0,75rem)                            |
| tag-md        | Kích cỡ         | Trung bình (phông chữ 0,8125rem, mặc định)         |
| tag-lg        | Kích cỡ         | Lớn (phông chữ 0,9375rem)                          |
| tag-xl        | Kích cỡ         | Cực lớn (phông chữ 1rem)                           |
| tag-primary   | Màu sắc         | Màu chủ đề chính                                   |
| tag-secondary | Màu sắc         | Màu chủ đề phụ                                     |
| tag-accent    | Màu sắc         | Màu chủ đề nhấn mạnh                               |
| tag-neutral   | Màu sắc         | Màu chủ đề trung tính                              |
| tag-info      | Màu sắc         | Màu sắc ngữ nghĩa thông tin                        |
| tag-success   | Màu sắc         | Màu ngữ nghĩa thành công                           |
| tag-warning   | Màu sắc         | Màu ngữ nghĩa cảnh báo                             |
| tag-error     | Màu sắc         | Lỗi ngữ nghĩa màu sắc                              |

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

## Kích thước thẻ

```html
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>
```

## Màu thẻ

```html
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>
```

## Kiểu thẻ

```html
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>
```

## Hình dạng thẻ

```html
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>
```

## Gắn thẻ với biểu tượng

```html
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>
```

## Thẻ có thể đóng

```html
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>
```

## Danh sách thẻ

```html
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>
```