Components / Alert Dialog

Alert Dialog

An interruptive modal for an important choice that requires a response.

example.component.html

html

<aevko-alert-dialog title="Delete workspace?" description="This permanently removes the workspace." initialFocus="#keep-workspace">
  <button aevkoAlertDialogTrigger>
    Delete workspace
  </button>
  <button id="keep-workspace" aevkoAlertDialogClose>
    Keep workspace
  </button>
  <button aevkoAlertDialogClose>
    Delete workspace
  </button>
</aevko-alert-dialog>

Installation

npx aevko-ui@latest add alert-dialog --yes

Source ownership

Customization

Write a concrete consequence, project a safe cancel action and a clearly labelled confirmation action, then keep the decision logic in application code.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`title / description`	`string`	`required / ''`	Decision heading and consequence text.
`open`	`model<boolean>`	`false`	Controlled alert-dialog state.
`initialFocus`	`CSS selector`	`''`	Usually targets the safest available action.
`closeOnEscape / restoreFocus`	`boolean`	`true / true`	Keyboard dismissal and focus return.
`aevkoAlertDialogTrigger / aevkoAlertDialogClose`	`projected slots`	`empty`	Native opener and explicit decision controls.

Accessibility contract

Accessibility

Included behavior

The panel exposes alertdialog semantics, blocks backdrop dismissal and keeps focus inside until a projected action closes it.

Your responsibility

Describe the irreversible consequence, make the safest action easy to find and never close the panel without recording the user’s explicit choice.

Back to all components