คอมโพเนนต์ทั้งหมด
Toast
แจ้งผลการกระทำสั้นๆ แล้วหายไปเอง
ui/toast.tsxClient componentใช้งาน
วาง ToastProvider ครั้งเดียวที่ราก แล้วเรียก toast() จากที่ใดก็ได้ ข้อผิดพลาดค้างจนกว่าผู้ใช้จะปิด ที่เหลือหายเองใน 5 วินาที
// app/layout.tsx
<ToastProvider>{children}</ToastProvider>
// any client component
const { toast } = useToast();
toast({ title: "บันทึกแล้ว", description: "การเปลี่ยนแปลงทั้งหมดถูกเก็บไว้", tone: "success" });
toast({ title: "ย้ายบทเรียนไปถังขยะแล้ว", action: { label: "เลิกทำ", onClick: undo } });
toast({ title: "อัปโหลดไม่สำเร็จ", tone: "danger" });toast(input)
| Prop | Type | Default | คำอธิบาย |
|---|---|---|---|
title | ReactNode | - | ผลลัพธ์ในหนึ่งบรรทัด |
description | ReactNode | - | รายละเอียดหรือวิธีแก้ |
tone | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | ไอคอนและสี |
action | { label, onClick } | - | การกระทำเดียว เช่น เลิกทำ |
duration | number | 5000, danger = 0 | มิลลิวินาที 0 คือค้างไว้ |
การเข้าถึง
- อยู่ใน live region แบบ polite ข้อผิดพลาดใช้ role=alert
- แสดงพร้อมกันไม่เกินสี่รายการ
- มีปุ่มปิดที่กดด้วยคีย์บอร์ดได้เสมอ
ใช้เมื่อไร
ควรทำ
- ใช้ยืนยันผลของสิ่งที่ผู้ใช้เพิ่งทำ
- ให้เลิกทำแทนการถามยืนยันก่อน
ไม่ควรทำ
- ใส่ข้อมูลสำคัญที่ผู้ใช้ต้องอ่านทีหลัง
- แจ้งเตือนสิ่งที่ผู้ใช้ไม่ได้ทำ