@chakra-ui/modal

A modal is a window overlaid on either the primary window or another dialog window. Contents behind a modal dialog are inert meaning that users cannot interact with content behind the dialog.

Installation

yarn add @chakra-ui/modal

# or

npm i @chakra-ui/modal

Import components

import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
} from "@chakra-ui/react"

Usage

When the modal opens, focus is sent into the modal and set to the first tabbable element. If there are no tabbed element, focus is set on the ModalContent.

function BasicUsage() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  return (
    <>
      <button>Open Modal</button>

      
        
          
            Modal Title
            

            
              
            

            
              <button>
                Close
              </button>
              <button>Secondary Action</button>
            
          
        
      
    
  )
}

Control Focus when Modal closes

When the dialog closes, it returns focus to the element that triggered. Set finalFocusRef to element that should receive focus when the modal opens.

function ReturnFocus() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const finalRef = React.useRef()

  return (
    <>
      
        Some other content that'll receive focus on close.
      

      <button>
        Open Modal
      </button>

      
        
          
            Modal Title
            
            
              
            

            
              <button>
                Close
              </button>
              <button>Secondary Action</button>
            
          
        
      
    
  )
}

Alert Dialog

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

Installation

yarn add @chakra-ui/alert-dialog

# or

npm i @chakra-ui/alert-dialog

Import components

import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogContent,
  AlertDialogOverlay,
} from "@chakra-ui/react"

Basic usage

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.

function AlertDialogExample() {
  const [isOpen, setIsOpen] = React.useState()
  const onClose = () => setIsOpen(false)
  const cancelRef = React.useRef()

  return (
    <>
      <button> setIsOpen(true)}&gt;
        Delete Customer
      </button>

      
        
          
            
              Delete Customer
            

            
              Are you sure? You can't undo this action afterwards.
            

            
              <button>
                Cancel
              </button>
              <button>
                Delete
              </button>
            
          
        
      
    
  )
}

Usage with Typescript

Using the above example will throw a typescript error. You'll want to modify the type of the useRef hook to the HTML element you're placing the focus on and default the value to null.

const cancelRef = React.useRef(null)

Drawer

The Drawer component is a panel that slides out from the edge of the screen. It can be useful when you need users to complete a task or view some details without leaving the current page.

Installation

yarn add @chakra-ui/modal

# or

npm i @chakra-ui/modal

Import components

import {
  Drawer,
  DrawerOverlay,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerBody,
  DrawerCloseButton,
} from "@chakra-ui/react"

Basic usage

Usage

By default, focus is placed on DrawerCloseButton when the drawer opens.

function DrawerExample() {
  const { isOpen, onOpen, onClose } = useDisclosure()
  const btnRef = React.useRef()

  return (
    <>
      <button>
        Open
      </button>
      
        
        
          
          Create your account

          
            <input placeholder="Type here...">
          

          
            <button>
              Cancel
            </button>
            <button color="blue">Save</button>
          
        
      
    
  )
}