Tag / Badge / Avatar
Visual indicators for status, labels, and identity.
Khi nào sử dụng
Phân loại trạng thái
Hiển thị trạng thái: active, pending, error bằng màu sắc.
Gắn nhãn nội dung
Tag kỹ năng, chủ đề hoặc danh mục cho item.
Tag có thể xóa
Hiện danh sách filter đã chọn, cho phép xóa từng tag.
Hướng dẫn
Do
- Dùng màu có ý nghĩa nhất quán trong hệ thống
- Giữ text ngắn — tối đa 2–3 từ
Don't
- Dùng quá nhiều màu khác nhau trên cùng một view
- Dùng Tag cho nội dung dài — hãy dùng Badge hoặc Alert
Tag
Default
Blue
Success
Error
Warning
Borderless
Closable
Badge
U5
N99
M
Success
Processing
Error
Avatar
S
M
L
DS
ABC+2
Statistic
Active Users
1,128
Revenue
$93,012
Growth
11.28%