Components

Dialog

Modal dialog based on the native dialog element

Overview

Dialog is a modal dialog based on the native <dialog> HTML element. It renders through a Portal and opens via showModal().

Compound — Root, Title, Content, Description, Footer
Native — Leverages <dialog> element's accessibility and focus trapping
Controlled — External state management via isOpen + onClose
Fixed width — 360px fixed, centered on screen

Basic Usage

import { Dialog, Button } from '@illog/ui'
 
<Dialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <Dialog.Title>Confirm Delete</Dialog.Title>
  <Dialog.Content>
    <Dialog.Description>
      Are you sure you want to delete this item? This action cannot be undone.
    </Dialog.Description>
  </Dialog.Content>
  <Dialog.Footer>
    <Button variant="secondary" onClick={() => setIsOpen(false)}>
      Cancel
    </Button>
    <Button variant="danger" onClick={handleDelete}>
      Delete
    </Button>
  </Dialog.Footer>
</Dialog>

Alert Dialog

<Dialog
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  role="alertdialog"
  ariaLabel="Important notice"
>
  <Dialog.Title>Session Expired</Dialog.Title>
  <Dialog.Content>
    <Dialog.Description>
      Your session has expired. Please log in again.
    </Dialog.Description>
  </Dialog.Content>
  <Dialog.Footer>
    <Button variant="primary" onClick={handleLogin}>
      Log In
    </Button>
  </Dialog.Footer>
</Dialog>

Sub-components

Dialog (Root)

Prop	Type	Default	Description
`isOpen`	`boolean`	required	Open state
`onClose`	`() => void`	required	Close callback
`role`	`'dialog' \| 'alertdialog'`	`'dialog'`	ARIA role
`ariaLabel`	`string`	—	Accessibility label
`ariaDescribedby`	`string`	—	Description element ID

Dialog.Title

Prop	Type	Description
`children`	`ReactNode`	Title text (h2, bodyStrong, centered)

Dialog.Content

Prop	Type	Description
`children`	`ReactNode`	Body content (wrapped in Stack)

Dialog.Description

Prop	Type	Description
`children`	`ReactNode`	Description text (bodyBase, textBrandTertiary)

Dialog.Footer

Prop	Type	Description
`children`	`ReactNode`	Action buttons (Inline, width: 100%)

Guidelines

Use role="alertdialog" for destructive action confirmations
Place a maximum of 2–3 buttons in the Footer
When isOpen={false}, the dialog is completely removed from the DOM