Skip to main content
The @zendeskgarden/react-modals package provides components for rendering overlay content above the main page. All components require a ThemeProvider at the root of your application.

​
Installation

npm install @zendeskgarden/react-modals

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Modal

A dialog overlay that traps focus and renders via a portal. Use Modal for confirmation dialogs, forms, or any content that requires the user’s attention before continuing. Modal composes the following subcomponents:
  • Modal.Header — title area at the top of the modal
  • Modal.Body — scrollable content area
  • Modal.Footer — action bar at the bottom
  • Modal.FooterItem — wraps individual actions inside the footer
  • Modal.Close — accessible close button

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Modal } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';

const [isOpen, setIsOpen] = useState(false);

<ThemeProvider>
  <Button onClick={() => setIsOpen(true)}>Open modal</Button>

  {isOpen && (
    <Modal onClose={() => setIsOpen(false)}>
      <Modal.Header>Confirm action</Modal.Header>
      <Modal.Body>Are you sure you want to continue?</Modal.Body>
      <Modal.Footer>
        <Modal.FooterItem>
          <Button isBasic onClick={() => setIsOpen(false)}>
            Cancel
          </Button>
        </Modal.FooterItem>
        <Modal.FooterItem>
          <Button isPrimary onClick={() => setIsOpen(false)}>
            Confirm
          </Button>
        </Modal.FooterItem>
      </Modal.Footer>
      <Modal.Close aria-label="Close modal" />
    </Modal>
  )}
</ThemeProvider>

​
Modal props

​
body.onClose
(event: KeyboardEvent | MouseEvent) => void
Handles close actions triggered from the backdrop or the close button.
​
body.isCentered
boolean
default:"true"
Centers the modal vertically and horizontally on the backdrop.
​
body.isAnimated
boolean
default:"true"
Animates the modal entrance and exit.
​
body.isLarge
boolean
Applies a wider layout to the modal.
​
body.backdropProps
HTMLAttributes<HTMLDivElement>
Passes HTML attributes directly to the backdrop element.
​
body.appendToNode
Element
Defines the DOM element the modal portal attaches to. Defaults to document.body.
​
body.focusOnMount
boolean
Directs keyboard focus to the modal when it mounts.
​
body.restoreFocus
boolean
Returns keyboard focus to the element that triggered the modal on close.

​
Modal.Header props

​
body.isDanger
boolean
Applies danger (destructive action) styling to the header.
​
body.tag
any
Overrides the rendered HTML element tag.

​
Drawer

A panel that slides in from the side of the viewport. Use Drawer for navigation, filters, or supplemental content that coexists with the main page. Drawer composes the following subcomponents:
  • Drawer.Header — title area
  • Drawer.Body — scrollable content area
  • Drawer.Footer — action bar at the bottom
  • Drawer.FooterItem — wraps individual actions inside the footer
  • Drawer.Close — accessible close button

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Drawer } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';

const [isOpen, setIsOpen] = useState(false);

<ThemeProvider>
  <Button onClick={() => setIsOpen(true)}>Open drawer</Button>

  <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
    <Drawer.Header>Settings</Drawer.Header>
    <Drawer.Body>Adjust your preferences here.</Drawer.Body>
    <Drawer.Footer>
      <Drawer.FooterItem>
        <Button onClick={() => setIsOpen(false)}>Done</Button>
      </Drawer.FooterItem>
    </Drawer.Footer>
    <Drawer.Close aria-label="Close drawer" />
  </Drawer>
</ThemeProvider>

​
Drawer props

​
body.isOpen
boolean
Controls whether the drawer is visible.
​
body.onClose
(event: KeyboardEvent | MouseEvent) => void
Handles close actions triggered from the backdrop or the close button.
​
body.backdropProps
HTMLAttributes<HTMLDivElement>
Passes HTML attributes directly to the backdrop element.
​
body.appendToNode
Element
Defines the DOM element the drawer portal attaches to. Defaults to document.body.
​
body.focusOnMount
boolean
default:"true"
Directs keyboard focus to the drawer when it opens.
​
body.restoreFocus
boolean
default:"true"
Returns keyboard focus to the triggering element when the drawer closes.

​
TooltipDialog

A positioned dialog anchored to a reference element. Use TooltipDialog for contextual help, guided flows, or confirmation prompts attached to a specific UI element. TooltipDialog composes the following subcomponents:
  • TooltipDialog.Title — heading at the top of the dialog
  • TooltipDialog.Body — content area
  • TooltipDialog.Footer — action bar
  • TooltipDialog.FooterItem — wraps individual actions inside the footer
  • TooltipDialog.Close — accessible close button

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { TooltipDialog } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';
import { useRef, useState } from 'react';

const [isOpen, setIsOpen] = useState(false);
const buttonRef = useRef(null);

<ThemeProvider>
  <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
    Open tooltip dialog
  </Button>

  <TooltipDialog
    referenceElement={isOpen && buttonRef.current ? buttonRef.current : undefined}
    onClose={() => setIsOpen(false)}
    placement="bottom"
    hasArrow
  >
    <TooltipDialog.Title>Need help?</TooltipDialog.Title>
    <TooltipDialog.Body>Here is some contextual guidance.</TooltipDialog.Body>
    <TooltipDialog.Footer>
      <TooltipDialog.FooterItem>
        <Button onClick={() => setIsOpen(false)}>Got it</Button>
      </TooltipDialog.FooterItem>
    </TooltipDialog.Footer>
    <TooltipDialog.Close aria-label="Close" />
  </TooltipDialog>
</ThemeProvider>

​
TooltipDialog props

​
body.referenceElement
HTMLElement | null
The element the dialog is anchored to. When undefined, the dialog is not rendered.
​
body.placement
string
default:"auto"
Controls the preferred placement of the dialog relative to the reference element. Accepts 'auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'.
​
body.hasArrow
boolean
Adds a directional arrow pointing to the reference element.
​
body.fallbackPlacements
Placement[]
A list of fallback placements to use when the preferred placement has insufficient space.
​
body.onClose
(event: KeyboardEvent | MouseEvent) => void
Handles close actions triggered from the backdrop or the close button.
​
body.isAnimated
boolean
default:"true"
Animates the dialog entrance and exit.
​
body.keepMounted
boolean
Keeps the dialog content in the DOM when closed instead of unmounting it.
​
body.zIndex
number
Sets the z-index of the dialog.
​
body.appendToNode
Element
Defines the DOM element the dialog portal attaches to. Defaults to document.body.

​
TooltipDialog.Title props

​
body.tag
any
Overrides the rendered HTML element tag.

Build docs developers (and LLMs) love

Get started for freeTalk to us