@ark-ui/react/toast + Tailwind CSS v4

Ark Toast

Thành phần thông báo Toast xây dựng trên máy trạng thái của Ark UI (Zag.js engine) và tạo kiểu toàn diện bằng Tailwind CSS v4. Hỗ trợ hàng đợi thông minh, hiệu ứng chuyển cảnh mượt mà, quản lý trạng thái Promise, nút hành động có thể tương tác, nhiều vị trí hiển thị và hỗ trợ WAI-ARIA đầy đủ.

1. Cơ bản (Basic)

Khởi tạo toaster engine với createArkToaster và kích hoạt thông báo tiêu chuẩn.

2. Phân loại trạng thái (Types)

Hỗ trợ đầy đủ các loại thông báo: Success, Error, Warning, Info và Loading với icon và màu sắc đặc trưng.

3. Xử lý bất đồng bộ (Promise)

Tự động đồng bộ vòng đời Promise từ trạng thái Loading chuyển tiếp sang Success hoặc Error.

4. Nút hành động (Action Trigger)

Nhúng nút tương tác hành động trực tiếp trên toast (như Hoàn tác, Thử lại) với callback phản hồi.

5. Vị trí hiển thị (Placements)

Linh hoạt neo thông báo tại 6 vị trí trên màn hình: Top/Bottom kết hợp Start/Center/End.

6. Thời gian tồn tại (Duration)

Cấu hình thời gian hiển thị tính bằng milliseconds hoặc vô hạn (Infinity) cho đến khi người dùng tắt.

7. Biến thể giao diện (Variants)

4 kiểu thiết kế tinh tế: Subtle (dịu nhẹ), Outline (viền màu), Solid (đậm màu) và Glass (kính mờ).

Biến thể đang chọn: subtle — Nền dịu nhẹ đồng bộ màu trạng thái

8. Kích thước (Sizes)

3 kích cỡ scale chuẩn thiết kế: Small (nhỏ gọn), Medium (tiêu chuẩn) và Large (nổi bật).

Kích thước đang chọn: md — Kích thước chuẩn hài hòa cho đại đa số ứng dụng

9. Cập nhật trực tiếp (Update)

Cập nhật tiêu đề, mô tả và trạng thái của một toast đang hiển thị theo thời gian thực bằng ID.

Trạng thái: Chưa có hoặc đã hoàn tất

10. Giới hạn & Hàng đợi (Max Toasts)

Giới hạn số lượng toast hiển thị đồng thời (max: 3); các thông báo vượt mức tự động xếp hàng đợi.

Toaster được cấu hình max: 3. Hai thông báo thứ 4 và 5 sẽ được tự động giữ trong hàng đợi và chỉ xuất hiện khi các thông báo trước được đóng.

11. Tuỳ biến chuyên sâu (Custom Compound Render)

Sử dụng Compound API tự do kết hợp cấu trúc, avatar người dùng, badge trạng thái và nút bấm tùy biến.

Notifications