If true, the modal will be open.
Modal
A modal is a dialog that focuses the user's attention exclusively on an information via a window that is overlaid on primary content.
Props#
Modal Props#
isOpenrequired
isOpenrequiredDescription
Type
booleanonCloserequired
onCloserequiredDescription
Callback invoked to close the modal.
Type
() => voidallowPinchZoom
allowPinchZoomDescription
Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
Type
booleanDefault
false.autoFocus
autoFocusDescription
If true, the modal will autofocus the first enabled and interactive
element within the ModalContent
Type
booleanDefault
trueblockScrollOnMount
blockScrollOnMountDescription
If true, scrolling will be disabled on the body when the modal opens.
Type
booleanDefault
truecloseOnEsc
closeOnEscDescription
If true, the modal will close when the Esc key is pressed
Type
booleanDefault
truecloseOnOverlayClick
closeOnOverlayClickDescription
If true, the modal will close when the overlay is clicked
Type
booleanDefault
truecolorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"finalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>id
idDescription
The id of the modal
Type
stringinitialFocusRef
initialFocusRefDescription
The ref of element to receive focus when the modal opens.
Type
RefObject<FocusableElement>isCentered
isCenteredDescription
If true, the modal will be centered on screen.
Type
booleanDefault
falselockFocusAcrossFrames
lockFocusAcrossFramesDescription
Enables 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
Type
booleanDefault
falsemotionPreset
motionPresetDescription
The transition that should be used for the modal
Type
MotionPresetDefault
scaleonCloseComplete
onCloseCompleteDescription
Fires when all exiting nodes have completed animating out
Type
() => voidonEsc
onEscDescription
Callback fired when the escape key is pressed and focus is within modal
Type
() => voidonOverlayClick
onOverlayClickDescription
Callback fired when the overlay is clicked.
Type
() => voidportalProps
portalPropsDescription
Props to be forwarded to the portal component
Type
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>preserveScrollBarGap
preserveScrollBarGapDescription
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
Type
booleanDefault
truereturnFocusOnClose
returnFocusOnCloseDescription
If true, the modal will return focus to the element that triggered it when it closes.
Type
booleanDefault
truescrollBehavior
scrollBehaviorDescription
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.
Type
ScrollBehaviorDefault
outsidesize
sizeDescription
The size of the Modal
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"Default
mdtrapFocus
trapFocusDescription
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.
Type
booleanDefault
trueuseInert
useInertDescription
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**
Type
booleanDefault
truevariant
variantDescription
The variant of the Modal
Type
stringOther components#
ModalOverlay,ModalHeader,ModalFooterandModalBodycomposesBoxcomponent.ModalCloseButtoncomposesCloseButton.
Props#
Modal Props#
isOpenrequired
isOpenrequiredDescription
If true, the modal will be open.
Type
booleanonCloserequired
onCloserequiredDescription
Callback invoked to close the modal.
Type
() => voidallowPinchZoom
allowPinchZoomDescription
Handle zoom/pinch gestures on iOS devices when scroll locking is enabled.
Type
booleanDefault
false.autoFocus
autoFocusDescription
If true, the modal will autofocus the first enabled and interactive
element within the ModalContent
Type
booleanDefault
trueblockScrollOnMount
blockScrollOnMountDescription
If true, scrolling will be disabled on the body when the modal opens.
Type
booleanDefault
truecloseOnEsc
closeOnEscDescription
If true, the modal will close when the Esc key is pressed
Type
booleanDefault
truecloseOnOverlayClick
closeOnOverlayClickDescription
If true, the modal will close when the overlay is clicked
Type
booleanDefault
truecolorScheme
colorSchemeDescription
The visual color appearance of the component
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"finalFocusRef
finalFocusRefDescription
The ref of element to receive focus when the modal closes.
Type
RefObject<FocusableElement>id
idDescription
The id of the modal
Type
stringinitialFocusRef
initialFocusRefDescription
The ref of element to receive focus when the modal opens.
Type
RefObject<FocusableElement>isCentered
isCenteredDescription
If true, the modal will be centered on screen.
Type
booleanDefault
falselockFocusAcrossFrames
lockFocusAcrossFramesDescription
Enables 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
Type
booleanDefault
falsemotionPreset
motionPresetDescription
The transition that should be used for the modal
Type
MotionPresetDefault
scaleonCloseComplete
onCloseCompleteDescription
Fires when all exiting nodes have completed animating out
Type
() => voidonEsc
onEscDescription
Callback fired when the escape key is pressed and focus is within modal
Type
() => voidonOverlayClick
onOverlayClickDescription
Callback fired when the overlay is clicked.
Type
() => voidportalProps
portalPropsDescription
Props to be forwarded to the portal component
Type
Pick<
PortalProps,
"appendToParentPortal" | "containerRef"
>preserveScrollBarGap
preserveScrollBarGapDescription
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
Type
booleanDefault
truereturnFocusOnClose
returnFocusOnCloseDescription
If true, the modal will return focus to the element that triggered it when it closes.
Type
booleanDefault
truescrollBehavior
scrollBehaviorDescription
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.
Type
ScrollBehaviorDefault
outsidesize
sizeDescription
The size of the Modal
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"Default
mdtrapFocus
trapFocusDescription
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.
Type
booleanDefault
trueuseInert
useInertDescription
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**
Type
booleanDefault
truevariant
variantDescription
The variant of the Modal
Type
stringOther components#
ModalOverlay,ModalHeader,ModalFooterandModalBodycomposesBoxcomponent.ModalCloseButtoncomposesCloseButton.
Theming#
The Modal component is a multipart component.
To learn more about styling multipart components, visit the Component Style page.
Anatomy#
- A:
header - B:
overlay - C:
dialogContainer - D:
dialog - E:
closeButton - F:
body - G:
footer
You can find more information in the source here.
Theming properties#
The properties that affect the theming of the Modal component are:
variant: The visual variant of theModal. Defaults to baseStyle.size: The size of theModal. Defaults to md.
Theming utilities#
createMultiStyleConfigHelpers: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle and defineMultiStyleConfig).definePartsStyle: a function used to create multipart style objects.defineMultiStyleConfig: a function used to define the style configuration for a multipart component.
Customizing the default theme#
import { modalAnatomy as parts } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(parts.keys)const baseStyle = definePartsStyle({// define the part you're going to styleoverlay: {bg: 'blackAlpha.200', //change the background},dialog: {borderRadius: 'md',bg: `purple.100`,},})export const modalTheme = defineMultiStyleConfig({baseStyle,})
After customizing the modal theme, we can import it in our theme file and add it in the components property:
import { extendTheme } from '@chakra-ui/react'import { modalTheme } from './components/theme/modal'export const theme = extendTheme({components: { Modal: modalTheme },})
This is a crucial step to make sure that any changes that we make to the
Modaltheme are applied.
Adding a custom size#
Let's assume we want to change the font size of both header and dialog.
import { modalAnatomy as parts } from '@chakra-ui/anatomy'import {createMultiStyleConfigHelpers,defineStyle,} from '@chakra-ui/styled-system'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(parts.keys)const xl = defineStyle({px: '6',py: '2',fontSize: 'xl',})const sm = defineStyle({fontSize: 'sm',py: '6',})const sizes = {xl: definePartsStyle({ header: sm, dialog: xl }),}export const modalTheme = defineMultiStyleConfig({sizes,})// Now we can use the new `xl` size<Modal size="xl" ... />
Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.
Adding a custom variant#
Let's assume we want to include a custom variant. Here's how we can do that:
import { modalAnatomy as parts } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(parts.keys)const purple = definePartsStyle({dialog: {borderRadius: 'md',bg: `purple.100`,// Let's also provide dark mode alternatives_dark: {bg: `purple.600`,color: 'white',},},})export const modalTheme = defineMultiStyleConfig({variants: { purple },})// Now we can use the new `purple` variant<Modal variant='purple' ... />
Changing the default properties#
Let's assume we want to change the default size and variant of every Modal in
our app.
import { modalAnatomy as parts } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system'const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts.keys)export const modalTheme = defineMultiStyleConfig({defaultProps: {size: 'xl',variant: 'purple',},})// This saves you time, instead of manually setting the size and variant every time you use an Modal:<Modal size="xl" variant="purple" ... />
Showcase#
import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalFooter, ModalBody, ModalCloseButton, useDisclosure, Button, Box, IconButton, useColorMode, } from "@chakra-ui/react"; import { FaMoon, FaSun } from "react-icons/fa"; export default function App() { const { isOpen, onOpen, onClose } = useDisclosure(); const { toggleColorMode, colorMode } = useColorMode(); return ( <Box position="relative" h="100vh" p={12}> <Button onClick={onOpen}>Open Modal</Button> <Modal isOpen={isOpen} onClose={onClose}> <ModalOverlay /> <ModalContent> <ModalHeader>Modal Title</ModalHeader> <ModalCloseButton /> <ModalBody> Lorem ipsum dolor sit amet. Et corporis quisquam eum adipisci impedit quo eius nisi est aspernatur vel veniam velit qui numquam totam. Vel debitis sint ut culpa cupiditate a dolores voluptates ut vero voluptatem non rerum aliquid qui sapiente possimus. Eum natus voluptates hic galisum architecto et nobis incidunt ut odio ipsum qui repudiandae voluptatem. </ModalBody> <ModalFooter> <Button colorScheme="blue" mr={3} onClick={onClose}> Close </Button> <Button variant="ghost">Secondary Action</Button> </ModalFooter> </ModalContent> </Modal> <IconButton aria-label="change theme" rounded="full" size="xs" position="absolute" bottom={4} left={4} onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />} /> </Box> ); }