Alert Dialog

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


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


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


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


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.

isOpenrequiredbooleanIf `true`, the modal will be open.-
leastDestructiveRefrequiredRefObject<FocusableElement> | undefined-
onCloserequired() => 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
colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Color Schemes for AlertDialog are not implemented in the default theme. You can extend the theme to implement them.-
finalFocusRefRefObject<FocusableElement>The `ref` of element to receive focus when the modal closes.-
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"scale" | "none" | "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.-
portalPropsPick<PortalProps, "appendToParentPortal" | "containerRef">Props to be forwarded to the portal component-
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"
size"sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | "5xl" | "6xl" | "full""md"
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
variantstringVariants for AlertDialog are not implemented in the default theme. You can extend the theme to implement them.-