Dialog

Material Design 3 dialog web component, built on the native <dialog> element.

4.3 KB gzipped
@lit-material/dialog 0.2.0
Renders on the server

Example

Install

npm install @lit-material/dialog @lit-material/tokens

import "@lit-material/dialog";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-dialog>`

Material Design 3 (basic) dialog, built on the native <dialog> element — so focus trapping, initial focus, top-layer stacking, and Escape-to-close all come from the browser rather than reimplemented JS.

Properties

Property	Attribute	Type	Default	Description
`open`	`open`	`boolean`	`false`
`disableBackdropClose`	`disable-backdrop-close`	`boolean`	`false`	If set, clicking the backdrop (outside the visible card) does not close the dialog.
`returnValue`	property only	`string`	none	The value the dialog was closed with (via `close()` or a `method="dialog"` form submit).

Events

Event	Description
`close`	Re-dispatched from the native `close` event, after the dialog has closed.
`cancel`	Re-dispatched from the native `cancel` event (fired on Escape, before `close`). Cancelable: calling `preventDefault()` stops the dialog from closing.

Slots

Slot	Description
`icon`	An optional small icon shown centered above the headline.
`headline`	The dialog's title.
default	The dialog's body content (supporting text, form fields, etc.).
`actions`	Action buttons, right-aligned. A `<form method="dialog">` submit button inside this slot closes the dialog natively and sets `returnValue`, without any extra JS.

CSS parts

Part	Description
`dialog`	The native `<dialog>` element. Transparent and sized to the viewport so clicks outside `container` can be detected as backdrop clicks; style the visible card via `container` instead.
`container`	The visible card (background, padding, shape, elevation).

Source on GitHub npm