<>Badges là các nhãn nhỏ dùng để hiển thị thông tin trạng thái, thông báo hoặc phân loại nội dung trong giao diện người dùng. Chúng thường đi kèm với các thành phần khác như nút, biểu tượng hoặc avatar để thu hút sự chú ý của người dùng.
🚀 Mục tiêu chính:
✅ Thông báo số lượng hoặc trạng thái mới (ví dụ: tin nhắn chưa đọc, thông báo mới).
✅ Phân loại hoặc đánh dấu nội dung (ví dụ: VIP, Premium, Mới).
✅ Giúp giao diện trở nên trực quan và dễ hiểu hơn.
/Các loại Badges phổ biến
1. Notification Badges (Huy hiệu thông báo) 🔔
👉 Hiển thị số lượng hoặc trạng thái chưa đọc.
✅ Phù hợp với biểu tượng thông báo, tin nhắn, giỏ hàng.
🔹 Ví dụ UI thực tế:
📩 Tin nhắn chưa đọc: Biểu tượng tin nhắn có huy hiệu “3” thể hiện có 3 tin nhắn chưa đọc.
🛒 Giỏ hàng: Huy hiệu “2” trên biểu tượng giỏ hàng báo hiệu có 2 sản phẩm trong giỏ.
2. Status Badges (Huy hiệu trạng thái) 🏷️
👉 Hiển thị trạng thái của người dùng hoặc hệ thống.
✅ Phù hợp với trạng thái online, offline, đang bận, đang tải.
🔹 Ví dụ UI thực tế:
🟢 Online / 🔴 Offline trên avatar người dùng.
⚡ Đang hoạt động trên profile của một thành viên trong diễn đàn.
3. Label Badges (Huy hiệu phân loại) 🏆
👉 Dùng để gán nhãn cho nội dung hoặc người dùng.
✅ Phù hợp với mức độ thành viên, nội dung nổi bật, trạng thái sản phẩm.
🔹 Ví dụ UI thực tế:
🔥 “Mới” / “Bán chạy” trên sản phẩm e-commerce.
💎 “VIP” / “Premium” trên tài khoản đặc biệt.
🟠 “In Progress” / 🟢 “Completed” trong hệ thống quản lý công việc.
4. Counter Badges (Huy hiệu số đếm) 🔢
👉 Hiển thị số liệu quan trọng liên quan đến một thành phần UI.
✅ Phù hợp với thông báo số lượng bình luận, lượt thích, lượt xem.
🔹 Ví dụ UI thực tế:
💬 Bình luận (25): Hiển thị số lượng bình luận trên bài viết.
❤️ Thích (1200): Huy hiệu thể hiện số lượt thích trong ứng dụng mạng xã hội.
/Best Practices khi thiết kế Badges
✅ Kích thước phù hợp → Không quá lớn gây mất cân đối với icon hoặc nút.
✅ Màu sắc rõ ràng, có độ tương phản tốt → Để thu hút sự chú ý.
✅ Không làm UI quá rối → Tránh hiển thị quá nhiều badges trên một màn hình.
✅ Cập nhật thời gian thực nếu cần → Ví dụ: Khi tin nhắn đã đọc, badge sẽ biến mất.
✅ Đặt đúng vị trí → Thường nằm ở góc phải trên của phần tử liên quan.
