Mushilu-San UI Alert dialog
A modal that asks the user to confirm an action before it runs, such as deleting data.
Selector: mui-alert-dialog
import { AlertDialog } from '@mushilu-san/ui/feedback';Loading example…
Overview
aria-modal="true") and linked to its body text with aria-describedby, so screen readers read the question with the choices.
destructive for actions that cannot be undone. The confirm button then uses the danger style. confirmed and cancelled tell the page what the user chose.
Guidelines
Do
Name the action in the confirm label, such as "Delete project". Explain what will be lost in the body text.
Don't
Do not use "OK" and "Cancel" when the choice has consequences. Do not open an alert dialog from another alert dialog.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
dialog | dialog (modal) | aria-modal="true". Described by its body text with aria-describedby. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab |
Escape is ignored on purpose. The user must choose one of the two actions, so the decision is never dismissed by accident.
API
AlertDialog
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | — | Question the user is asked. Labels the dialog. |
confirmLabel | string | 'Confirm' | Text of the confirm button. Default `Confirm`. |
cancelLabel | string | 'Cancel' | Text of the cancel button. Default `Cancel`. |
destructive | boolean | false | Set to true for destructive actions — styles confirm button in danger color. Accepts attribute presence, e.g. <… destructive>. |
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the dialog is open. Two-way bindable with `[(open)]`. |
| Name | Type | Description |
|---|---|---|
confirmed | void | Emits when the user chooses the confirm button. |
cancelled | void | Emits when the user chooses the cancel button. |
CSS parts
::part(body)::part(cancel)::part(confirm)::part(footer)::part(header)::part(panel)::part(root)::part(surface)::part(title)
Tokens
--mui-color-surface-raised--mui-color-danger--mui-shadow-5--mui-z-modal--mui-color-focus-ring