Alert Dialog

The AlertDialog component is used to interrupt the user with a mandatory confirmation or action.

See CAlertDialog's accessibility report

Import#

Chakra UI exports seven alert dialog-related components.

• CAlertDialog: provides context and state for the dialog.
• CAlertDialogHeader: should contain the title announced by screen readers.
• CAlertDialogBody: should contain the description announced by screen readers.
• CAlertDialogFooter: should contain the actions of the dialog.
• CAlertDialogOverlay: The dimmed overlay behind the dialog.
• CAlertDialogContent: The wrapper for the alert dialog's content.
• CAlertDialogCloseButton: The button that closes the dialog.

import { CAlertDialog, CAlertDialogHeader, CAlertDialogBody, CAlertDialogFooter, CAlertDialogOverlay, CAlertDialogContent, CAlertDialogCloseButton } from "@chakra-ui/vue"; 

Usage#

CAlertDialog requires that you provide the leastDestructiveRef prop. This ref can be an actual Vue ref to a focusable element or component in your alert dialog. The leastDestructiveRef prop also accepts a function that returns a ref.

Based on WAI-ARIA specifications for alert dialogs when the dialog opens, the focus should be placed on the least destructive element to prevent users from accidentally confirming the destructive action.

<template> <div> <c-alert-dialog :is-open="isOpen" :least-destructive-ref="$refs.cancelRef" :on-close="closeDialog" > <c-alert-dialog-overlay /> <c-alert-dialog-content> <c-alert-dialog-header font-size="lg" font-weight="bold"> Delete Customer </c-alert-dialog-header> <c-alert-dialog-body> Are you sure? You can't undo this action afterwards. </c-alert-dialog-body> <c-alert-dialog-footer> <c-button ref="cancelRef" @click="closeDialog"> Cancel </c-button> <c-button variantColor="red" @click="closeDialog" ml="3"> Delete </c-button> </c-alert-dialog-footer> </c-alert-dialog-content> </c-alert-dialog> <c-button variant-color="red" @click="openDialog"> Delete Customer </c-button> </div> </template> <script> export default { data () { return { isOpen: false } }, methods: { closeDialog() { this.isOpen = false }, openDialog() { this.isOpen = true } } } </script> 

Accessibility#

• CAlertDialog has role alertdialog, and aria-modal set to true.
• When the dialog opens, the focus is automatically set to the least destructive element.
• When the dialog opens, the content in the CAlertDialogHeader and CAlertDialogBody is announced by screen readers via aria-labelledby and aria-describedby attributes.
• Clicking on the overlay closes the CAlertDialog.
• Pressing esc closes the dialog.

Props#

AlertDialog and its components composes the CModal component, the only exception is that it requires a leastDestructiveRef which is similar to the initialFocusRef in CModal