Thư viện thuật ngữ / UI/UX

Badge là gì?

Còn gọi: huy hiệu, chấm thông báo, badge ui, notification badge, chấm thông báo, chấm đỏ thông báo

Badge là phần tử nhỏ gắn lên một icon, avatar hoặc mục menu để báo trạng thái hoặc số lượng, ví dụ chấm đỏ có số tin nhắn chưa đọc trên biểu tượng ứng dụng.

Hiểu kỹ hơn

Có hai dạng chính: chấm nhỏ không số chỉ báo 'có gì mới', và badge có số cho biết số lượng. Khi số quá lớn, nên rút gọn thành '99+' để badge không phình to. Ngoài ra còn badge dạng nhãn chữ như 'Mới', 'Bán chạy', 'Beta' đặt cạnh tên sản phẩm hay tính năng. Màu đỏ hoặc màu nhấn giúp badge nổi bật, nhưng nếu mọi thứ đều có badge thì người dùng sẽ bỏ qua tất cả. Về tiếp cận, không chỉ dựa vào màu: số lượng cần được đọc lên cho trình đọc màn hình, ví dụ 'Tin nhắn, 3 chưa đọc'. Trong Figma, badge nên là component riêng có biến thể chấm, số và chữ.