DocumentationComponents
Overlay

Dialog

A modal dialog using the native <dialog> element. Includes focus trap, Escape to close, backdrop click to close, and smooth animations.

LlmDialog

Demo

Confirm Delete
Are you sure you want to delete this item? This action cannot be undone.
<LlmButton onClick={() => setOpen(true)}>Open Dialog</LlmButton>
<LlmDialog open={open} onOpenChange={setOpen} size="sm">
  <LlmDialogHeader>Confirm Delete</LlmDialogHeader>
  <LlmDialogContent>Are you sure? This cannot be undone.</LlmDialogContent>
  <LlmDialogFooter>
    <LlmButton variant="outline" onClick={() => setOpen(false)}>Cancel</LlmButton>
    <LlmButton variant="primary" onClick={() => setOpen(false)}>Delete</LlmButton>
  </LlmDialogFooter>
</LlmDialog>

API

PropTypeDefaultDescription
openbooleanfalseControls dialog visibility
onOpenChange(open: boolean) => void—Called when open state changes
closeOnBackdropbooleantrueClose when clicking the backdrop
size'sm' | 'md' | 'lg' | 'xl' | 'full''md'Max-width of the dialog

Import

import { LlmDialog, LlmDialogHeader, LlmDialogContent, LlmDialogFooter } from '@atelier-ui/react';