ConfirmDialog is controlled via the ConfirmationService that needs to be installed as an application plugin.

The service is available with the useConfirm function for Composition API or using the $confirm property of the application for Options API.

ConfirmDialog is defined using the ConfirmDialog component and an instance of ConfirmationService is required to display it by calling the require method.

The position property of the confirm options is used to display a Dialog at all edges and corners of the screen.

Properties of the dialog are defined in two ways, message, icon and header properties can either be defined using the require method or declaratively with the message and icon slots. If these values are unlikely to change then the declarative approach would be useful, still properties defined with the require method call would override the slot values.

In addition, the footer section can be customized by passing your own UI via the container slot, an important note to make confirmation work with a custom UI is assigning the accept and reject callbacks to your own buttons.

Headless mode is enabled by defining a container slot that lets you implement entire confirmation UI instead of the default elements.

Screen Reader

ConfirmDialog component uses alertdialog role along with aria-labelledby referring to the header element however any attribute is passed to the root element so you may use aria-labelledby to override this default behavior. In addition aria-modal is added since focus is kept within the popup.

It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.

When require method of the $confirm instance is used and a trigger is passed as a parameter, ConfirmDialog adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the dialog is defined.

If the dialog is controlled with the visible property aria-expanded and aria-controls need to be handled explicitly.

Overlay Keyboard Support

Buttons Keyboard Support