Komponen / Lapisan & umpan balik
Alert
Peringatan sistem ringkas ala macOS/iOS di tengah layar: judul, pesan, dan satu–dua tombol. Untuk keputusan cepat yang tidak bisa ditunda — hapus, sesi berakhir, koneksi terputus.
Import
tsx
import { Alert } from '@divistant/circca-react';Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul: pertanyaan atau kejadian singkat ("Hapus lampiran?", "Sesi berakhir"). |
| message | ReactNode | — | Pesan satu–dua kalimat tentang akibat atau langkah berikutnya. Dibacakan sebagai deskripsi alert. |
| type | 'default' | 'destructive' | 'default' | Default: aksi Primary, fokus awal ke aksi. Destructive: aksi Danger, ikon peringatan, fokus awal ke Batal. |
| icon | Visual | — | Ikon 40 di atas judul (warna aksen). Destructive memakai ikon peringatan bila tidak diisi; Default tanpa ikon. |
| actionLabel | ReactNode | — | Label tombol aksi — kata kerja yang menyebut akibatnya ("Hapus", "Masuk lagi"). |
| onAction | () => void | Promise<unknown> | — | Dijalankan saat aksi ditekan, lalu Alert tertutup. Promise: loading sampai selesai; bila ditolak Alert tetap terbuka. |
| cancelLabel | ReactNode | null | 'Batal' | Label tombol batal. null = tanpa tombol batal (Esc juga tidak menutup). |
| onCancel | () => void | — | Dipanggil saat Batal atau Esc ditekan. |
| stacked | boolean | false | Tombol bertumpuk (aksi di atas, batal di bawah) untuk label panjang. Default berdampingan sama lebar. |
| trigger | ReactNode | — | Elemen pemicu, mis. <Button>. Tanpa trigger, kendalikan lewat open/onOpenChange. |
| open / defaultOpen | boolean | — | Status terbuka (terkontrol / awal). |
| onOpenChange | (open: boolean) => void | — | Dipanggil saat Alert dibuka atau ditutup lewat tombol/Esc. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Sumber
Kode komponen ada di packages/react/src/components/alert. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.