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.

Editable Example
<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

NameTypeDefaultDescription
leastDestructiveRef (required)ref, selector Function: refThe 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!