Live Docs

Navigation

Feedback /

stable

Toast

Notifikasi non-blocking untuk status aksi. Dikelola via ToastProvider + hook useToast.

import { ToastProvider, useToast } from "@naraya/ui";

Overview

Toast dipakai untuk feedback pasca-aksi seperti save berhasil, gagal sinkronisasi, atau warning ringan. Jangan gunakan toast untuk konfirmasi yang mewajibkan keputusan user.

Examples

Provider + trigger

Gunakan dismiss(id) dari return value toast() untuk kasus real.

function Actions() {
  const { toast } = useToast();
  return (
    <Button onClick={() => toast({ title: "Tersimpan", tone: "success" })}>
      Show toast
    </Button>
  );
}

<ToastProvider>
  <Actions />
</ToastProvider>

Custom duration

toast({
  title: "Menyimpan...",
  description: "Akan tertutup dalam 8 detik",
  tone: "info",
  duration: 8000,
});

API

PropTypeDefaultDescription
ToastProvider*React component—Provider konteks toast + viewport render.
useToast().toast(item) => string—Menambah toast baru dan return id.
item.title*string—Judul toast.
item.descriptionstring—Deskripsi tambahan.
item.tone"info" | "success" | "warning" | "error""info"Tone visual toast.
item.durationnumber5000Auto-dismiss (ms). 0 untuk sticky.
useToast().dismiss(id: string) => void—Menutup toast tertentu.

Tokens Used

--bg-surface

Toast background

--border-subtle

Toast border

--color-{tone}

Tone accent border/icon

--shadow-lg

Viewport elevation

Accessibility

  • Toast item dirender dengan role='status' dan aria-live='polite'.
  • Gunakan judul yang jelas agar message bisa dipahami tanpa konteks visual.
  • Untuk error kritis yang butuh aksi, pertimbangkan Dialog daripada toast.