Overlay
Dialog
A modal dialog using the native <dialog> element. Includes focus trap, Escape to close, backdrop click to close, and smooth animations.
LlmDialogDemo
Live PreviewReact
html
<llm-button (click)="open = true">Open Dialog</llm-button>
<llm-dialog [(open)]="open" size="sm">
<llm-dialog-header>Confirm Delete</llm-dialog-header>
<llm-dialog-content>Are you sure? This cannot be undone.</llm-dialog-content>
<llm-dialog-footer>
<llm-button variant="outline" (click)="open = false">Cancel</llm-button>
<llm-button variant="primary" (click)="open = false">Delete</llm-button>
</llm-dialog-footer>
</llm-dialog>API (Angular)
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controls dialog visibility |
onOpenChange | (open: boolean) => void | — | Called when open state changes |
closeOnBackdrop | boolean | true | Close when clicking the backdrop |
size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Max-width of the dialog |
Composition parts
Dialog is composed from the parts below. Each part is its own component — drop the ones you don't need.
LlmDialogHeader
Title area. The text becomes the dialog's accessible name. Slot-only.
LlmDialogContent
Main body. Receives initial focus when the dialog opens. Slot-only.
LlmDialogFooter
Action row — typically Cancel / Confirm buttons. Slot-only.
Import
ts
import { LlmDialog, LlmDialogHeader, LlmDialogContent, LlmDialogFooter } from '@atelier-ui/angular';Accessibility
ARIA roledialog (aria-modal="true")
| Key | Action |
|---|---|
| Escape | Close the dialog. Focus is returned to the element that opened it. |
| Tab / Shift+Tab | Cycle through focusable elements inside the dialog (focus is trapped). |
- Initial focus goes to the first tabbable element inside LlmDialogContent on open.
- LlmDialogHeader is automatically linked as the accessible name via aria-labelledby.
- Background content is inert while the dialog is open — screen readers only hear the dialog content.
See the accessibility overview for the site-wide WCAG stance.