Overlay
Dialog
A modal dialog using the native <dialog> element. Includes focus trap, Escape to close, backdrop click to close, and smooth animations.
AtlDialogDemo
Live PreviewReact
html
<atl-button (click)="open = true">Open Dialog</atl-button>
<atl-dialog [(open)]="open" size="sm">
<atl-dialog-header>Confirm Delete</atl-dialog-header>
<atl-dialog-content>Are you sure? This cannot be undone.</atl-dialog-content>
<atl-dialog-footer>
<atl-button variant="outline" (click)="open = false">Cancel</atl-button>
<atl-button variant="primary" (click)="open = false">Delete</atl-button>
</atl-dialog-footer>
</atl-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.
AtlDialogHeader
Title area. The text becomes the dialog's accessible name. Slot-only.
AtlDialogContent
Main body. Receives initial focus when the dialog opens. Slot-only.
AtlDialogFooter
Action row — typically Cancel / Confirm buttons. Slot-only.
Import
ts
import { AtlDialog, AtlDialogHeader, AtlDialogContent, AtlDialogFooter } 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 AtlDialogContent on open.
- AtlDialogHeader 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.