Overlays and menus
useDialog
Manages modal and alert dialog lifecycle — open, close, focus trapping, backdrop click dismiss, and Escape key handling. Spreads props onto a <dialog> element.
Live component preview · Astro
Explore Dialog
Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useDialog.
React usage
Import from @santi020k/lumen-react and spread the controller props onto the matching components.
import { Button, Dialog, Card } from '@santi020k/lumen-react'
import { useDialog } from '@santi020k/lumen-react'
export function ConfirmDialog() {
const dialog = useDialog()
return (
<>
<Button {...dialog.triggerProps}>Open dialog</Button>
<Dialog {...dialog.dialogProps}>
<Card>
<h2>Confirm action</h2>
<p>Are you sure you want to continue?</p>
<Button {...dialog.closeProps}>Close</Button>
</Card>
</Dialog>
</>
)
}import { Button, Dialog, Card } from '@santi020k/lumen-react'
import { useDialog } from '@santi020k/lumen-react'
export function ConfirmDialog() {
const dialog = useDialog()
return (
<>
<Button {...dialog.triggerProps}>Open dialog</Button>
<Dialog {...dialog.dialogProps}>
<Card>
<h2>Confirm action</h2>
<p>Are you sure you want to continue?</p>
<Button {...dialog.closeProps}>Close</Button>
</Card>
</Dialog>
</>
)
}Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.
Options
| Property | Type | Default | Description |
|---|---|---|---|
| alert | boolean | false | Render as an alert dialog that blocks backdrop-click dismiss. |
| defaultOpen | boolean | false | Initial open state for uncontrolled usage. |
| open | boolean | - | Controlled open state. When provided the hook does not manage open internally. |
| onOpenChange | (open: boolean) => void | - | Callback fired when the open state changes. |
| id | string | auto | Explicit id for the dialog element. |
Controller return values
| Property | Type | Description |
|---|---|---|
| dialogProps | LumenProps<"dialog"> | Spread onto the <dialog> element. Includes aria-modal, data attributes, click and keydown handlers. |
| triggerProps | LumenProps<"button"> | Spread onto the trigger button. Binds the click handler that opens the dialog. |
| closeProps | LumenProps<"button"> | Spread onto any close button inside the dialog. |
| dialogRef | RefObject<HTMLDialogElement> | Ref to the dialog DOM element. |
| triggerRef | RefObject<HTMLElement> | Ref to the trigger DOM element. |
| open | boolean | Current open state. |
| close | () => void | Imperatively close the dialog. |
| setOpen | Dispatch<SetStateAction<boolean>> | State setter for controlled usage. |