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.
AlertDialog requires that you provide the
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.
Modal comes with a scale transition by default but you can change it by
motionPreset prop, and set its value to either
aria-modalset to true.
AlertDialogBodyare announced by screen readers via
AlertDialog and its components compose the
Modal component. The only
exception is that it requires a
leastDestructiveRef which is similar to the
|isOpen||If `true`, the modal when be opened.||-|
|onClose||Callback invoked to close the modal.||-|
|allowPinchZoom||Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. Defaults to `false`.||-|
|autoFocus||If `true`, the modal will autofocus the first enabled and interactive element within the `ModalContent`|
|blockScrollOnMount||If `true`, scrolling will be disabled on the `body` when the modal opens.|
|closeOnEsc||If `true`, the modal will close when the `Esc` key is pressed|
|closeOnOverlayClick||If `true`, the modal will close when the overlay is clicked|
|finalFocusRef||The `ref` of element to receive focus when the modal closes.||-|
|getContainer||Function that will be called to get the parent element that the modal will be attached to.||-|
|id||The `id` of the modal||-|
|isCentered||If `true`, the modal will be centered on screen.|
|motionPreset||The transition that should be used for the modal||-|
|onEsc||Callback fired when the escape key is pressed and focus is within modal||-|
|onOverlayClick||Callback fired when the overlay is clicked.||-|
|preserveScrollBarGap||If `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||-|
|returnFocusOnClose||If `true`, the modal will return focus to the element that triggered it when it closes.|
|scrollBehavior||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.|
|trapFocus||If `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.|
|useInert||A11y: 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**|