<>Toasts là một dạng thông báo nhỏ, ngắn gọn xuất hiện ở góc màn hình và tự động biến mất sau vài giây. Chúng giúp người dùng nhận được phản hồi về một hành động mà không làm gián đoạn trải nghiệm.
🚀 Mục tiêu chính:
✅ Hiển thị thông báo nhanh chóng.
✅ Không làm gián đoạn luồng thao tác của người dùng.
✅ Giúp UI trông gọn gàng hơn so với modal popups.
/Khi nào nên sử dụng Toasts?
✅ Xác nhận một hành động đã thành công → “Tệp đã được tải lên thành công.”
✅ Cảnh báo nhẹ → “Bạn đang ở chế độ ngoại tuyến.”
✅ Nhắc nhở nhỏ → “Nhấn vào đây để xem hướng dẫn.”
✅ Không yêu cầu phản hồi từ người dùng
🚫 Không dùng cho:
– Cảnh báo quan trọng cần sự chú ý ngay lập tức (dùng modal thay thế).
– Nội dung quá dài hoặc phức tạp.
/Cấu trúc của Toasts
🔹 Nội dung chính: Văn bản ngắn gọn (~1 câu).
🔹 Icon (tùy chọn): Biểu tượng giúp người dùng dễ nhận biết (✅, ⚠️, ❌, ℹ️).
🔹 Action (tùy chọn): Một nút như “Hoàn tác” hoặc “Xem chi tiết”.
🔹 Hiệu ứng: Fade in/out hoặc slide nhẹ để tăng trải nghiệm trực quan.
📌 Ví dụ Toasts trong thực tế:
✅ Thành công: “Bài viết đã được đăng.”
⚠️ Cảnh báo: “Mạng yếu, có thể ảnh hưởng đến chất lượng video.”
❌ Lỗi: “Không thể gửi tin nhắn. Vui lòng thử lại.”
/Best Practices khi thiết kế Toasts
✅ Xuất hiện ngắn gọn (3-5 giây) → Không làm phiền người dùng quá lâu.
✅ Vị trí hợp lý → Thường ở góc dưới màn hình, không che nội dung chính.
✅ Không spam toast liên tục → Tránh làm người dùng cảm thấy phiền.
✅ Màu sắc dễ nhận diện → Xanh lá (thành công), vàng (cảnh báo), đỏ (lỗi).
✅ Có thể đóng thủ công (nếu cần) → Để người dùng có tùy chọn tắt sớm.
