Components / Dialog

Dialog

A focused modal surface for a contained task with deliberate dismissal.

example.component.html

html

<aevko-dialog title="Edit workspace" description="Give your team a recognizable name." initialFocus="#workspace-name">
  <button aevkoDialogTrigger>
    Edit workspace
  </button>
  <label for="workspace-name">
    Workspace name
  </label>
  <input id="workspace-name" />
  <button aevkoDialogClose>
    Cancel
  </button>
  <button>
    Save changes
  </button>
</aevko-dialog>

Installation

npx aevko-ui@latest add dialog --yes

Source ownership

Customization

Project the exact form or task controls you need, bind open when application state matters and tune focus/dismissal without replacing the native modal primitive.

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`	`string`	`required`	Accessible and visible modal heading.
`description`	`string`	`''`	Optional supporting text and accessible description.
`open`	`model<boolean>`	`false`	Controlled open state with two-way binding.
`initialFocus`	`CSS selector`	`''`	Element inside the panel focused after opening.
`closeOnEscape / closeOnBackdrop`	`boolean`	`true / true`	Configures non-action dismissal.
`restoreFocus`	`boolean`	`true`	Returns focus to the previous active element.
`aevkoDialogTrigger / aevkoDialogClose`	`projected slots`	`empty`	Native elements that open or close the modal.

Accessibility contract

Accessibility

Included behavior

The native modal makes background content inert, traps focus and restores it to the opener after dismissal.
Escape and backdrop behavior remain explicit inputs.

Your responsibility

Provide a concise title, set initialFocus for a predictable first control and avoid placing an entire application workflow inside one modal.

Back to all components