Alert Dialog

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

Import#

Chakra UI exports 7 alert dialog related components.

  • AlertDialog: provides context and state for the dialog.
  • AlertDialogHeader: should contain the title announced by screen readers.
  • AlertDialogBody: should contain the description announced by screen readers.
  • AlertDialogFooter: should contain the actions of the dialog.
  • AlertDialogOverlay: The dimmed overlay behind the dialog.
  • AlertDialogContent: The wrapper for the alert dialog's content.
  • AlertDialogCloseButton: The button that closes the dialog.
import {
AlertDialog,
AlertDialogBody,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogContent,
AlertDialogOverlay,
} from "@chakra-ui/react"

Usage#

AlertDialog requires that you provide the leastDestructiveRef prop.

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

Editable Example

Changing the transition#

The Modal comes with a scale transition by default but you can change it by passing a motionPreset prop, and set its value to either slideInBottom, slideInRight, or scale.

Editable Example

Accessibility#

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

Props#

AlertDialog and its components compose the Modal component. The only exception is that it requires a leastDestructiveRef which is similar to the initialFocusRef of Modal.

NameTypeDescriptionDefault
isOpenbooleanIf `true`, the modal will be open.-
leastDestructiveRefRefObject<FocusableElement> | undefined-
onClose() => voidCallback invoked to close the modal.-
allowPinchZoombooleanHandle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to `false`.-
autoFocusbooleanIf `true`, the modal will autofocus the first enabled and interactive element within the `ModalContent`true
blockScrollOnMountbooleanIf `true`, scrolling will be disabled on the `body` when the modal opens.true
closeOnEscbooleanIf `true`, the modal will close when the `Esc` key is pressedtrue
closeOnOverlayClickbooleanIf `true`, the modal will close when the overlay is clickedtrue
colorSchemestring-
finalFocusRefRefObject<FocusableElement>The `ref` of element to receive focus when the modal closes.-
getContainer(() => HTMLElement | null)Function that will be called to get the parent element that the modal will be attached to.-
idstringThe `id` of the modal-
isCenteredbooleanIf `true`, the modal will be centered on screen.false
lockFocusAcrossFramesbooleanEnables aggressive focus capturing within iframes. - If `true`: keep focus in the lock, no matter where lock is active - If `false`: allows focus to move outside of iframe-
motionPreset"none" | "scale" | "slideInBottom" | "slideInRight"The transition that should be used for the modal-
onEsc(() => void)Callback fired when the escape key is pressed and focus is within modal-
onOverlayClick(() => void)Callback fired when the overlay is clicked.-
preserveScrollBarGapbooleanIf `true`, a `padding-right` will be applied to the body element that's equal to the width of the scrollbar. This can help prevent some unpleasant flickering effect and content adjustment when the modal opens-
returnFocusOnClosebooleanIf `true`, the modal will return focus to the element that triggered it when it closes.true
scrollBehavior"inside" | "outside"Where scroll behavior should originate. - If set to `inside`, scroll only occurs within the `ModalBody`. - If set to `outside`, the entire `ModalContent` will scroll within the viewport."outside"
sizestring-
trapFocusbooleanIf `false`, focus lock will be disabled completely. This is useful in situations where you still need to interact with other surrounding elements. 🚨Warning: We don't recommend doing this because it hurts the accessibility of the modal, based on WAI-ARIA specifications.true
useInertbooleanA11y: If `true`, the siblings of the `modal` will have `aria-hidden` set to `true` so that screen readers can only see the `modal`. This is commonly known as making the other elements **inert**true
variantstring-
Edit this page