<>Alerts là thông báo quan trọng xuất hiện trên giao diện để cảnh báo, thông báo lỗi, hoặc yêu cầu người dùng chú ý ngay lập tức. Khác với Toasts, Alerts thường không tự động biến mất và có thể yêu cầu người dùng phản hồi.
🚀 Mục tiêu chính:
✅ Báo lỗi hoặc vấn đề nghiêm trọng.
✅ Cung cấp thông tin quan trọng mà người dùng cần đọc.
✅ Hướng dẫn người dùng cách khắc phục vấn đề.
/Khi nào nên sử dụng Alerts?
✅ Lỗi nghiêm trọng cần người dùng xử lý → “Không thể kết nối với máy chủ. Vui lòng kiểm tra mạng.”
✅ Cảnh báo về rủi ro hoặc mất dữ liệu → “Xóa tài khoản sẽ không thể khôi phục. Bạn có chắc chắn không?”
✅ Yêu cầu xác nhận hành động → “Bạn có chắc muốn đăng xuất?”
✅ Thông báo hệ thống quan trọng → “Bảo trì hệ thống vào lúc 22:00 tối nay.”
🚫 Không dùng cho:
– Thông báo nhẹ không quan trọng (dùng Toasts thay thế).
– Nội dung không yêu cầu người dùng phản hồi ngay lập tức.
/Cấu trúc của Alerts
🔹 Tiêu đề rõ ràng: Giúp người dùng hiểu vấn đề ngay lập tức.
🔹 Mô tả ngắn gọn: Giải thích chi tiết về lỗi hoặc cảnh báo.
🔹 Icon (tùy chọn): Giúp trực quan hơn (⚠️ Cảnh báo, ❌ Lỗi, ℹ️ Thông tin).
🔹 Nút hành động: “OK”, “Hủy”, “Thử lại” hoặc “Xem chi tiết”.
📌 Ví dụ Alerts trong thực tế:
❌ Lỗi nghiêm trọng: “Không thể kết nối với máy chủ. Kiểm tra lại kết nối mạng.”
⚠️ Cảnh báo: “Bạn sắp xóa toàn bộ dữ liệu. Hành động này không thể hoàn tác!”
ℹ️ Thông tin: “Mật khẩu đã được cập nhật thành công.”
/Best Practices khi thiết kế Alerts
✅ Ngắn gọn & rõ ràng: Đừng làm người dùng rối với quá nhiều chữ.
✅ Phân cấp mức độ quan trọng:
🔴 Lỗi nghiêm trọng: Màu đỏ.
🟡 Cảnh báo: Màu vàng.
🔵 Thông tin: Màu xanh dương.
✅ Đặt đúng vị trí: Trung tâm màn hình nếu cần phản hồi, góc trên nếu chỉ là thông báo.
✅ Cung cấp hành động phù hợp: Đừng chỉ hiển thị lỗi – hãy hướng dẫn cách khắc phục.
