คอมโพเนนต์ทั้งหมด

Alert

ข้อความสถานะที่อยู่บนหน้าจนกว่าสถานการณ์จะเปลี่ยน

ui/feedback.tsxServer safe

โทน

info, success, warning, danger และ neutral ไอคอนและหัวข้อบอกความหมายร่วมกับสี

มีบทเรียนใหม่

บทที่ 7 ของ Agentic Workflows เปิดให้เรียนแล้ว

ชำระเงินแล้ว

ใบเสร็จส่งไปที่อีเมลของคุณ คอร์สเปิดให้เรียนทันที

ใกล้หมดเวลา

เหลือ 10 นาทีก่อนปิดส่งคำตอบ ระบบจะส่งให้อัตโนมัติเมื่อครบเวลา

บันทึกไม่สำเร็จ

ตรวจการเชื่อมต่อแล้วลองอีกครั้ง คำตอบของคุณยังอยู่ในหน้านี้

โหมดดูตัวอย่าง

คุณกำลังดูคอร์สในฐานะผู้เรียน

tsx

<Alert tone="info" title="มีบทเรียนใหม่">บทที่ 7 เปิดให้เรียนแล้ว</Alert>
<Alert tone="success" title="ชำระเงินแล้ว">ใบเสร็จส่งไปที่อีเมลของคุณ</Alert>
<Alert tone="warning" title="ใกล้หมดเวลา">เหลือ 10 นาทีก่อนปิดส่งคำตอบ</Alert>
<Alert tone="danger" title="บันทึกไม่สำเร็จ">ตรวจการเชื่อมต่อแล้วลองอีกครั้ง</Alert>

พร้อมการกระทำและปิด

ยืนยันอีเมลของคุณ

เราส่งลิงก์ไปที่ khun@aswinology.com ลิงก์มีอายุ 24 ชั่วโมง

มีบทเรียนใหม่ 2 บท

บทที่ 7 และ 8 ของ Agentic Workflows เปิดให้เรียนแล้ว

tsx

<Alert tone="warning" title="ยืนยันอีเมลของคุณ"
  actions={<Button size="sm" variant="outline">ส่งลิงก์อีกครั้ง</Button>}>
  เราส่งลิงก์ไปที่ khun@aswinology.com
</Alert>
<Alert tone="info" title="มีบทเรียนใหม่ 2 บท" onDismiss={() => setOpen(false)}>…</Alert>

Props

Prop	Type	Default	คำอธิบาย
`tone`	`"info" \| "success" \| "warning" \| "danger" \| "neutral"`	`"info"`	ความหมาย danger ใช้ role=alert ที่เหลือใช้ role=status
`title`	`ReactNode`	`-`	สรุปสั้นหนึ่งบรรทัด
`actions`	`ReactNode`	`-`	ปุ่มขนาด sm ใต้ข้อความ
`onDismiss`	`() => void`	`-`	แสดงปุ่มปิด
`icon`	`ReactNode`	`ตามโทน`	เปลี่ยนไอคอน

ใช้เมื่อไร

ควรทำ

บอกสิ่งที่เกิดขึ้นและสิ่งที่ผู้ใช้ทำได้
วางใกล้ส่วนที่เกี่ยวข้อง

ไม่ควรทำ

ใช้แจ้งผลการกระทำที่เพิ่งเกิด ใช้ Toast แทน
ซ้อนหลาย Alert ในที่เดียว