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.
Import
tsx
import { ToastProvider, useToast, Toast } from '@divistant/circca-react';Props · ToastProvider
Pasang sekali di root aplikasi. Berisi area notifikasi (Viewport) di bawah tengah layar, z-index z-toast.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Isi aplikasi. |
| duration | number | 5000 | Lama tampil default (ms) untuk Toast tanpa aksi. Toast beraksi minimal 8000. |
| max | number | 3 | Jumlah Toast yang tampil bersamaan; yang tertua ditutup lebih dulu. |
| label | string | 'Notifikasi ({hotkey})' | Label area notifikasi untuk pembaca layar; {hotkey} diganti F8. |
| viewportClassName | string | — | Kelas tambahan untuk area notifikasi, mis. menggeser posisi di atas bilah aksi bawah. |
Props · useToast() → toast(options)
useToast() mengembalikan fungsi toast. toast() mengembalikan id; toast.dismiss(id?) menutup satu Toast atau semuanya.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| message | ReactNode | — | Pesan singkat: objek + hasil ("PO-2026-0142 disimpan"). |
| tone | 'neutral' | 'success' | 'danger' | 'neutral' | Menentukan ikon dan warnanya (Info, CheckCircle, WarningCircle). |
| action | { label: string; onClick: () => void; altText?: string } | — | Aksi di ujung kanan, mis. Urungkan. Toast tertutup setelah aksi ditekan. altText = cara lain menjalankan aksi untuk pembaca layar (default: label). |
| duration | number | 5000 / 8000 | Lama tampil (ms). Default 5000, atau 8000 bila ada aksi. |
Props · Toast
Tampilan statis tanpa timer dan live region — untuk pratinjau dan tiruan desain. Juga menerima atribut <div>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| message | ReactNode | — | Pesan singkat. |
| tone | 'neutral' | 'success' | 'danger' | 'neutral' | Ikon dan warnanya. |
| action | { label: string; onClick: () => void } | — | Aksi opsional. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/toast. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.