Badges & Tags
HybReport Design Language System — Thành phần nhãn và thẻ đánh dấu
Nhãn cơ bản — Kích thước nhỏ (SM)
Vuông
Thông tin
Thành công
Cảnh báo
Lỗi
Mặc định
Tròn (pill)
Thông tin
Thành công
Cảnh báo
Lỗi
Mặc định
Font: 9px · Padding: 2px 6px · Weight: 700
Nhãn cơ bản — Kích thước trung bình (MD)
Vuông
Thông tin
Thành công
Cảnh báo
Lỗi
Mặc định
Tròn (pill)
Đang xử lý
Hoàn tất
Chờ duyệt
Từ chối
Nháp
Font: 10px · Padding: 3px 8px · Weight: 700
Chấm trạng thái (Status Dots)
Đang hoạt động
Đã kết nối
Chờ phản hồi
Mất kết nối
Không hoạt động
Dot: 7×7px · Border-radius: 50% · Gap: 5px
Thẻ có nút xóa (Removable Tags)
Kế toán
Đã duyệt
Ưu tiên
Quá hạn
Lưu trữ
Nút xóa: 14×14px · Hover opacity: 1 · Cursor: pointer
Nhóm thẻ (Grouped Tags)
Phòng ban
Kế toán
Nhân sự
Kinh doanh
Trạng thái
Hoàn tất
Đang chờ
Trễ hạn
Hỗn hợp
3 mục
Báo cáo Q2
Đã gửi
Container: bg #f8fafc · Border: 1px solid #e2e8f0 · Radius: 10px · Gap: 6px
Ví dụ sử dụng thực tế
Hóa đơn
Đã thanh toán
Chờ thanh toán
Quá hạn 15 ngày
Người dùng
Online
Offline
Bận
Số lượng
12
3
99+