StellarUI

<stellar-dialog>

Modal and drawer surface backed by a native <dialog> element, with header, actions, footer, and placement behavior.

Properties

Component

Example

Preview

Open dialog

Dialog title

This is a native dialog-backed surface.

Cancel

Confirm

Markup

Copy

<stellar-button data-dialog="open dialog-example">Open dialog</stellar-button>
<stellar-dialog id="dialog-example">
  <h3 slot="header">Dialog title</h3>
  <p>This is a native dialog-backed surface.</p>
  <div slot="footer">
    <stellar-button appearance="ghost" data-dialog="close">Cancel</stellar-button>
    <stellar-button tone="primary" data-dialog="close">Confirm</stellar-button>
  </div>
</stellar-dialog>

API

Complete props, events, slots, and implementation notes for the shipped dialog.

Props

Prop	Type	Default	Notes
`open`	`boolean`	`false`	Controls the native dialog open state and drives `showModal()` and `close()`.
`placement`	`center \| top \| bottom \| start \| end \| full`	`center`	Changes the presentation from a centered modal to edge drawers or a fullscreen sheet.
`light-dismiss`	`boolean`	`false`	Allows backdrop clicks to close the dialog instead of pulsing it.
`reset-scroll`	`boolean`	`false`	Resets the body scroll position when the dialog closes.

Events

Event	Source	Notes
`before-open`	`stellar-dialog`	Cancellable event fired before the dialog is shown.
`open`	`stellar-dialog`	Emitted after the show animation completes.
`before-close`	`stellar-dialog`	Cancellable event fired before dismissal. The source element is available as `event.detail.source`.
`close`	`stellar-dialog`	Emitted after the hide animation completes and the native dialog closes.

Slots

Slot	Notes
default	Main dialog content rendered inside the scrollable body.
`header`	Optional header content shown above the body.
`actions`	Optional header actions. Overrides the default close button when the header is present.
`footer`	Optional footer content shown below the body.

Notes

The public tag is `stellar-dialog`, backed by a real native `<dialog>` and matching the shipped `open`, `placement`, `light-dismiss`, and `reset-scroll` contract.
Use the `header`, `actions`, and `footer` slots for the frame chrome. If `actions` is empty and a header exists, the dialog supplies a default close button there.
`before-open` and `before-close` are cancellable. `before-close` includes `event.detail.source` so app code can tell whether Escape, the backdrop, or a close button triggered dismissal.
Use `data-dialog="open <id>"` on external triggers and `data-dialog="close"` inside the dialog when you want declarative open and close wiring without extra scripts.