Confirm
Confirmation dialog for lit-material: await confirm({...}) for destructive actions, with an optional type-the-name-to-confirm field.
- 7.6 KB gzipped
- @lit-material/confirm 0.1.6
- Renders on the server
Example
Confirm
await confirm({ … }) for actions that need a second look. Cancel has focus, so a stray Enter doesn't confirm;
require-text keeps the button disabled until the name is typed.
Plain
Destructive, type the name to confirm
Install
npm install @lit-material/confirm @lit-material/tokensimport "@lit-material/confirm";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-confirm-dialog>
A confirmation dialog: a headline, a message, Cancel and a confirm button,
built on lit-material-dialog. show() resolves true when the visitor
confirms and false on Cancel, Escape or a backdrop click.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
headline | headline | string | "" | The question, e.g. "Delete project web?". |
message | message | string | "" | Supporting text under the headline. |
confirmLabel | confirm-label | string | "Confirm" | The confirm button's label. |
cancelLabel | cancel-label | string | "Cancel" | The cancel button's label. |
destructive | destructive | boolean | false | Paint the confirm button in the error colour. |
requireText | require-text | string | "" | Text the visitor must type before confirming (empty: no field). |
open | open | boolean | false | Whether the dialog is open. |
returnValue | property only | string | "" | "confirm" or "cancel" once closed. |
Events
| Event | Description |
|---|---|
close | After it closes; returnValue is "confirm" or "cancel". |
Slots
| Slot | Description |
|---|---|
| default | The message; overrides message. |