# Dialog > A native opened and closed with invoker commands — modal, edge panel, or fullscreen. URL: https://apogee.avaui.dev/docs/dialog Last updated: 2026-10-15 A native opened and closed with invoker commands — modal, edge panel, or fullscreen. Last updated October 15, 2026 Uses JavaScript A small script closes the dialog on backdrop click, as a fallback for browsers without native `closedby` support. **Without JS:** Opening, closing via the ✕ button, and Escape all still work — they're native dialog + Invoker Commands behaviour, not authored JS. Only the backdrop-click-to-close fallback is lost, and only in browsers that don't yet support the native closedby attribute. ```astro

Update your profile details below.

 ``` ## Add ```sh npx @ava-ui/apogee add dialog ``` Depends on `CloseButton` and `utils` (`responsive.ts`). Pair with `Button` (`command` / `commandfor`) to open and close it. ## Usage ```astro --- import Dialog from '@/components/apogee/Dialog/Dialog.astro' import Button from '@/components/apogee/Button/Button.astro' ---

Are you sure?

 ``` ## Anatomy The dialog is a flex column: the media, header and footer keep their place and only the body scrolls, so a tall drawer never scrolls its buttons away. - `media` slot — optional; a cover image flush to the top edge. The close button floats over it in its dark theme. - **Header** — `title` and `subtitle`, or the `header` slot for your own markup (a heading plus supporting text, or a FeaturedIcon row). The `icon` slot sits above the title block, or beside it with `iconPosition="start"`. Always includes a close button (`command="close"`). - **Body** — default slot; the only region that scrolls. - `footer` slot — optional; a bottom action row, buttons at the end, or two equal columns with `footerLayout="fill"`. ## API `@composable` — exposed to Content Editors in AVA. Any other attribute (e.g. `aria-describedby`) passes through to the root ``. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `id` | `string` | — | Required — matches the trigger’s `commandfor`. | | `title` | `string` | — | Renders as the header `

`, wired with `aria-labelledby`. | | `subtitle` | `string` | — | One line under the title, wired with `aria-describedby`. | | `position` | `Responsive<'center' \| 'start' \| 'end' \| 'top' \| 'bottom' \| 'full-screen'>` | `'center'` | Where it sits, per breakpoint: `{ base: 'bottom', md: 'center' }` is a sheet on phones and a dialog from `md`. `start` / `end` are logical (`end` is the right in LTR, the left in RTL). | | `size` | `string` | `32rem` centre, `24rem` drawers, `85dvh` sheets | CSS length: the width of a centred dialog or drawer, the max height of a top or bottom sheet. Use this rather than an inline `style`, which replaces it. | | `padding` | `0 \| 2 \| 3 \| 4 \| 5 \| 6` | `5` | Inner padding in spacing steps. `0` for edge-to-edge media. | | `overlay` | `'dim' \| 'blurred' \| 'transparent'` | `'dim'` | Backdrop treatment. `transparent` leaves page scrolling alone; the page is still inert while the dialog is open. | | `dismissOnBackdrop` | `boolean` | `true` | Clicking the backdrop closes the dialog. Set `false` for a decision the user must answer. | | `iconPosition` | `'top' \| 'start'` | `'top'` | Where the `icon` slot sits: above the title block, or beside it. | | `footerLayout` | `'end' \| 'fill'` | `'end'` | Footer buttons at the end, or stacked on phones and two equal columns from `sm`. | | `class` | `string` | — | Extra classes, merged last. | ## Variants Every `position`: ```astro Centered dialog content. End-edge drawer (right in LTR). Start-edge drawer (left in LTR). Top-edge drawer. Bottom-edge drawer. Fills the viewport. ``` ## Icon, header and media An icon above or beside the title, and a `fill` footer: ```astro … … ``` Your own header, and a cover image with the dark close button over it: ```astro

Ana Lima

Product designer

… … ``` With both `title` and a `header` slot, the slot wins and labels the dialog: ```astro

Custom heading

 ``` A long drawer: the header and footer stay pinned, the body scrolls. ```astro …forty paragraphs… ``` ## Responsive position Sheet on phones, centred dialog from `md`. Resize the window and reopen. ```astro

Copy the link below.

 ``` A `position` object needs a `base` key. Without one, the dialog falls back to the browser’s centred layout below the first breakpoint you set. ## Size and padding `size` is a width for a centred dialog or drawer and a max height for a sheet. Every `padding` step: ```astro … … … … … … padding 3, 4, 5, 6 … ``` ## Overlay ```astro … … … ``` ## Must answer `dismissOnBackdrop={false}`: the backdrop click does nothing; Escape, the close button and the footer buttons still work. ```astro

You have unsaved edits.

 ``` ## States - **Open / closed** — the native `[open]` attribute; enter/exit fades and slides (`@starting-style`), respects `prefers-reduced-motion`. - **Backdrop** — fades to the `--overlay` scrim on open (`::backdrop`); `blurred` adds a 4px blur. Page scrolling is locked while a dim or blurred dialog is open: the rule lives in the tokens file (`body:has(dialog:modal)`), so re-run `init` when you update. Add `scrollbar-gutter: stable` to `html` if the layout shift bothers you. Try each state via the triggers in the Variants preview above. ## Examples Five bodies cover most dialogs. A stacked confirm (icon above, `25rem`, fill footer), a horizontal one (icon beside, buttons at the end), a destructive confirm, a media dialog and a form. ```astro

Visitors see the new version right away.