Alert Dialog

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

See CAlertDialog's accessibility report


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 {
} from "@chakra-ui/vue";


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.

Editable Example
      <c-alert-dialog-overlay />
        <c-alert-dialog-header font-size="lg" font-weight="bold">
          Delete Customer
          Are you sure? You can't undo this action afterwards.
          <c-button ref="cancelRef" @click="closeDialog">
          <c-button variantColor="red" @click="closeDialog" ml="3">
    <c-button variant-color="red" @click="openDialog">
      Delete Customer
export default {
  data () {
    return {
      isOpen: false
  methods: {
    closeDialog() {
      this.isOpen = false
    openDialog() {
      this.isOpen = true


  • 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.


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

leastDestructiveRef (required)vm.$ref, () => vm.ref or CSS selectorThe least destructive action to get focus when dialog is open

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!