Komponen / Lapisan & umpan balik
Dialog
Sheet modal untuk konfirmasi dan form singkat. Menghentikan pekerjaan sampai pengguna memutuskan — pakai seperlunya.
Import
tsx
import { Dialog } from '@divistant/circca-react';Props · Dialog
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| title | ReactNode | — | Judul: kalimat tanya atau kata kerja + objek ("Hapus PO-2026-0146?"). |
| subtitle | ReactNode | — | Deskripsi singkat tujuan atau akibat aksi. Dibacakan pembaca layar sebagai deskripsi dialog. |
| children | ReactNode | — | Isi dialog; bergulir sendiri bila lebih tinggi dari layar. |
| footer | ReactNode | — | Tombol di kanan bawah: batal (dibungkus Dialog.Close) lalu aksi utama paling kanan. |
| size | 'sm' | 'md' | 'lg' | 'sm' | Lebar 400 / 560 / 720. |
| alert | boolean | false | Konfirmasi yang menuntut keputusan: role="alertdialog", tidak tertutup saat klik di luar. |
| closeButton | boolean | false | Tombol × di kanan atas. Default mati, sesuai gaya sheet HIG. |
| 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 dialog dibuka/ditutup (Esc, klik di luar, Dialog.Close). |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). |
Props · Dialog.Close / Dialog.Trigger
Pakai asChild agar elemen anak (mis. <Button>) yang menutup atau membuka dialog.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| asChild | boolean | false | Render sebagai elemen anak. |
Sumber
Kode komponen ada di packages/react/src/components/dialog. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.