@zendeskgarden/react-modals

@zendeskgarden/react-modals

This package includes components relating to modals in the Garden Design System.

Installation

npm install @zendeskgarden/react-modals

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

Modal

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

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Modal onClose={() => alert('modal closing')}>
    <Modal.Header>Example Header</Modal.Header>
    <Modal.Body>Some content</Modal.Body>
    <Modal.Footer>
      <Modal.FooterItem>
        <Button isBasic>Cancel</Button>
      </Modal.FooterItem>
      <Modal.FooterItem>
        <Button isPrimary>Confirm</Button>
      </Modal.FooterItem>
    </Modal.Footer>
    <Modal.Close aria-label="Close modal" />
  </Modal>
</ThemeProvider>;

Drawer

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
  </Button>
  <Drawer isOpen={state.isOpen} onClose={() => setIsOpen(false)}>
    <Drawer.Header>Example Title</Drawer.Header>
    <Drawer.Body>Some content</Drawer.Body>
    <Drawer.Footer>
      <Drawer.FooterItem>
        <Button>Click</Button>
      </Drawer.FooterItem>
    </Drawer.Footer>
    <Drawer.Close aria-Label="Close" />
  </Drawer>
</ThemeProvider>

TooltipDialog

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

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

<ThemeProvider>
  <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
    Open
  </Button>
  <TooltipDialog
    onClose={() => setIsOpen(false)}
    referenceElement={isOpen && buttonRef.current ? buttonRef.current : undefined}
  >
    <TooltipDialog.Title>Example Title</TooltipDialog.Title>
    <TooltipDialog.Body>Some content</TooltipDialog.Body>
    <TooltipDialog.Footer>
      <TooltipDialog.FooterItem>
        <Button>Click</Button>
      </TooltipDialog.FooterItem>
    </TooltipDialog.Footer>
    <TooltipDialog.Close aria-label="Close" />
  </TooltipDialog>
</ThemeProvider>;

Changelog

v9.8.0 (2025-07-18)

:rocket: New Feature

• avatars
  • #2031 feat(avatars): allow null aria-label on StatusIndicator to mark as decorative (@jzempel)
• theming
  • #2032 feat(theming): allow null color scheme key to bypass ColorSchemeProvider local storage (@jzempel)