Live Docs

Navigation

Feedback /

stable

Dialog

Modal overlay untuk aksi penting yang membutuhkan fokus dan keputusan eksplisit dari user.

import { Dialog } from "@naraya/ui";

Overview

Dialog memblok interaksi background, mengunci scroll, dan memusatkan fokus keyboard ke modal. Gunakan untuk konfirmasi destruktif, form penting, atau detail yang butuh perhatian penuh.

Examples

Basic dialog

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open dialog</Button>
<Dialog open={open} onClose={() => setOpen(false)} title="Konfirmasi">
  <Text>...</Text>
</Dialog>

Sizes

<Dialog size="sm" ... />
<Dialog size="md" ... />
<Dialog size="lg" ... />
<Dialog size="xl" ... />

Props

PropTypeDefaultDescription
open*boolean—Kontrol visibility modal.
onClose*() => void—Dipanggil saat close (overlay click, ESC, tombol close).
titleReactNode—Judul modal (terhubung aria-labelledby).
descriptionReactNode—Deskripsi singkat di header.
size"sm" | "md" | "lg" | "xl""md"Lebar modal.
childrenReactNode—Konten utama body modal.
footerReactNode—Aksi footer (CTA).
classNamestring—Class tambahan untuk panel modal.

Tokens Used

--bg-surface

Panel background

--border-subtle

Panel border

--shadow-xl

Modal elevation

--radius-lg

Rounded panel

Accessibility

  • Dialog memakai role='dialog' dengan aria-modal='true'.
  • Focus trap aktif selama dialog terbuka, fokus kembali ke trigger saat close.
  • ESC menutup dialog secara default.
  • Jangan lupa title/deskripsi yang jelas untuk konteks screen reader.