Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Tag Component

CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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ả
tagCăn cứNhãn nội tuyến để phân loại hoặc xác định nội dung
tag-outlinePhong cáchTô màu trong suốt với đường viền màu
tag-softPhong cáchNền màu bị tắt tiếng
tag-squarePhong cáchLàm tròn nhẹ (ít hơn viên thuốc mặc định)
tag-removeCông cụ sửa đổiNút loại bỏ/xóa bên trong thẻ
tag-xsKích cỡCực nhỏ (phông chữ 0,6875rem)
tag-smKích cỡNhỏ (phông chữ 0,75rem)
tag-mdKích cỡTrung bình (phông chữ 0,8125rem, mặc định)
tag-lgKích cỡLớn (phông chữ 0,9375rem)
tag-xlKích cỡCực lớn (phông chữ 1rem)
tag-primaryMàu sắcMàu chủ đề chính
tag-secondaryMàu sắcMàu chủ đề phụ
tag-accentMàu sắcMàu chủ đề nhấn mạnh
tag-neutralMàu sắcMàu chủ đề trung tính
tag-infoMàu sắcMàu sắc ngữ nghĩa thông tin
tag-successMàu sắcMàu ngữ nghĩa thành công
tag-warningMàu sắcMàu ngữ nghĩa cảnh báo
tag-errorMàu sắcLỗi ngữ nghĩa màu sắc

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

Tag
Another tag
Third tag
1
2
3
<div class="tag">Tag</div>
<div class="tag">Another tag</div>
<div class="tag">Third tag</div>

1
2
3
<div className="tag">Tag</div>
<div className="tag">Another tag</div>
<div className="tag">Third tag</div>

Kích thước thẻ

Extra Small
Small
Medium
Large
html 
1
2
3
4
<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ẻ

Default
Primary
Secondary
Accent
Info
Success
Warning
Error
html 
1
2
3
4
5
6
7
8
<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ẻ

Default
Outline
Soft
Dashed
html 
1
2
3
4
<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ẻ

Square
Rounded
Pill
C
html 
1
2
3
4
<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

Starred
html 
1
2
3
4
<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

JavaScript
React
TypeScript
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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ẻ

JavaScript
React
CSS
UI Design
Frontend
Production
html 
1
2
3
4
5
6
7
8
<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>