Toast
Menyampaikan feedback singkat lewat status message tanpa memakai toast untuk error penting atau keputusan yang membutuhkan perhatian penuh.
Tujuan belajar
- Membedakan feedback non-blocking dari error atau keputusan yang harus tetap terlihat dekat task
- Membuat toast API dengan tone, title, message, dan dismiss action
- Memilih status atau alert announcement berdasarkan urgency
- Menghindari toast serta announcement yang menciptakan noise
Isi lesson
6 blok- 1.Toast memberi feedback, bukan menggantikan context pentingBelum selesaiWajib
- 2.Toast status dengan tone dan dismiss actionBelum selesaiWajib
- 3.Coding practiceBelum selesaiWajib
- 4.Cek pemahamanBelum selesaiWajib
- 5.Toast tidak boleh menjadi satu-satunya error stateBelum selesaiOpsional
- 6.RingkasanBelum selesaiWajib
Toast memberi feedback, bukan menggantikan context penting
WajibToast berguna untuk feedback singkat setelah action selesai: draft tersimpan, filter diterapkan, atau link disalin. Karena biasanya muncul sementara dan jauh dari control asal, toast tidak boleh menjadi satu-satunya tempat untuk menjelaskan masalah penting. Error validasi tetap berada dekat field. Error pembayaran, publish failure, atau perubahan yang perlu dipulihkan membutuhkan surface yang bertahan serta recovery action jelas.
Toast dapat memiliki tone success atau error, title, message, dan dismiss action. API visual tidak menentukan apakah announcement pantas. Feature owner menentukan kapan feedback non-blocking cukup dan kapan user perlu persistent error. status cocok untuk update tidak mendesak; alert digunakan hemat untuk pesan yang harus segera disadari. Jangan mengumumkan setiap perubahan kecil karena screen reader user menerima noise yang sama mengganggunya dengan toast visual berlebihan.
Bagian ini memengaruhi progres lesson.
Toast status dengan tone dan dismiss action
Wajibtype CourseToastTone = "success" | "error";
type CourseToastProps = { tone: CourseToastTone; title: string; message: string; onDismiss?: () => void };
export function CourseToast({ tone, title, message, onDismiss }: CourseToastProps) {
const isError = tone === "error";
return (
<section className={"toast toast--" + tone} role={isError ? "alert" : "status"} aria-live={isError ? "assertive" : "polite"}>
<strong>{title}</strong>
<p>{message}</p>
{onDismiss ? <button type="button" onClick={onDismiss} aria-label="Tutup notifikasi">Tutup</button> : null}
</section>
);
}Success memakai status/polite karena user tidak perlu dipaksa menghentikan alur. Error memakai alert/assertive hanya bila pesan memang perlu diketahui segera. Auto-dismiss, queue, dan timing perlu diputuskan dari dampak pesan lalu diuji di product.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususBuild course toast status
Buat CourseToast dengan success/error tone, status announcement, dan dismiss action opsional.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Feedback mana yang paling tepat memakai toast success non-blocking?
Progres lesson naik setelah jawaban benar.
Kesalahan umum
OpsionalToast tidak boleh menjadi satu-satunya error state
Toast yang menghilang membuat user sulit membaca detail atau mencoba recovery. Jika action tidak selesai, simpan error di area yang tetap terlihat bersama action retry atau bantuan. Toast boleh melengkapi feedback, tetapi jangan menyembunyikan state penting dari page.
Opsional, tidak menghambat penyelesaian lesson.
Ringkasan
Wajib- Toast cocok untuk feedback singkat yang tidak memblokir workflow.
- Validasi inline, error persistent, dan confirm action memiliki surface lebih tepat daripada toast.
- Tone, copy, dismiss action, dan live announcement perlu mencerminkan urgency nyata.
- Feedback terlalu sering menciptakan noise visual dan auditory.
- Berikutnya, pilih tabs atau native select dari tugas user, bukan tren visual.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Toast memberi feedback, bukan menggantikan context penting.