Dialog — Atelier

Demo

Live PreviewReact

jsx

<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 (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

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).

Explore in Storybook