Komponen / Lapisan & umpan balik

Toast

HUD gelap singkat di bawah tengah layar untuk konfirmasi setelah aksi ("PO-2026-0142 disimpan"), dengan aksi Urungkan opsional. Hilang sendiri tanpa menghentikan pekerjaan.

React · BetaFigma · siapFigma Sumber

Konfirmasi simpan

Panggil `toast()` dari `useToast()` setelah aksi berhasil. Di aplikasi, `<ToastProvider>` dipasang sekali di root (mis. app/layout.tsx); tiap contoh di sini membungkus dirinya sendiri hanya agar bisa berdiri sendiri.

import { Button, ToastProvider, useToast } from '@divistant/circca-react';
import { FloppyDisk } from '@phosphor-icons/react';

// Konfirmasi singkat setelah simpan. Di aplikasi, ToastProvider dipasang sekali di root — di sini hanya agar contoh berdiri sendiri.
function SimpanPO() {
  const toast = useToast();
  return (
    <Button variant="primary" leadingVisual={FloppyDisk} onClick={() => toast({ tone: 'success', message: 'PO-2026-0142 disimpan' })}>
      Simpan PO
    </Button>
  );
}

export default function Example() {
  return (
    <ToastProvider>
      <SimpanPO />
    </ToastProvider>
  );
}

Dengan aksi Urungkan

Untuk aksi yang bisa dibalik (arsipkan, pindahkan), jalankan langsung lalu tawarkan Urungkan — lebih ringan daripada Dialog konfirmasi. Toast beraksi tampil 8 detik dan tidak hilang selama di-hover atau difokus.

INV-2026-0192 · Rina Kartika (Finance)

import { useState } from 'react';
import { Button, ToastProvider, useToast } from '@divistant/circca-react';
import { Archive } from '@phosphor-icons/react';

// Aksi yang bisa dibatalkan langsung dijalankan, lalu Toast menawarkan Urungkan — tanpa Dialog konfirmasi.
function ArsipkanFaktur() {
  const toast = useToast();
  const [diarsipkan, setDiarsipkan] = useState(false);
  const arsipkan = () => {
    setDiarsipkan(true);
    toast({
      message: 'INV-2026-0192 diarsipkan',
      action: { label: 'Urungkan', onClick: () => setDiarsipkan(false) },
    });
  };
  return (
    <div className="grid justify-items-start gap-3">
      <Button leadingVisual={Archive} onClick={arsipkan}>
        Arsipkan faktur
      </Button>
      <p className="type-callout-default text-muted">{diarsipkan ? 'INV-2026-0192 ada di arsip.' : 'INV-2026-0192 · Rina Kartika (Finance)'}</p>
    </div>
  );
}

export default function Example() {
  return (
    <ToastProvider>
      <ArsipkanFaktur />
    </ToastProvider>
  );
}

Tone

Neutral untuk informasi, Success untuk aksi berhasil, Danger untuk aksi gagal yang cukup dicoba lagi. Hanya ikon yang berwarna; latar tetap HUD gelap.

import { Button, ToastProvider, useToast } from '@divistant/circca-react';

// Neutral untuk informasi, Success untuk aksi berhasil, Danger untuk aksi yang gagal dan cukup dicoba lagi.
function Tombol() {
  const toast = useToast();
  return (
    <div className="flex flex-wrap gap-2">
      <Button onClick={() => toast({ message: 'Tautan PO-2026-0142 disalin' })}>Neutral</Button>
      <Button onClick={() => toast({ tone: 'success', message: 'Pengajuan Anisa Nugraha disetujui' })}>Success</Button>
      <Button
        onClick={() =>
          toast({
            tone: 'danger',
            message: 'INV-2026-0192 gagal dikirim',
            action: { label: 'Coba lagi', onClick: () => toast({ tone: 'success', message: 'INV-2026-0192 terkirim' }) },
          })
        }
      >
        Danger
      </Button>
    </div>
  );
}

export default function Example() {
  return (
    <ToastProvider>
      <Tombol />
    </ToastProvider>
  );
}