‌
‌

Modal

A window overlaid on either the primary window, rendering the content underneath inert.

Quick nav

Anatomy
API Reference
Accessibility

Features

Keyboard accessible
Focus is automatically trapped
Manages screen reader announcements with Title
Themes ready

Links

View source Report an issue ARIA design ARIA authoring

Anatomy

import { Modal, OverlayContainer } from "@wonderflow/react-components";

export default () => {
  const [visible, setVisible] = useState<boolean>(false);

  return (
    <OverlayContainer onClose={() => setVisible(false)}>
      {visible && (
        <Modal>
          <Modal.Content title="Modal title">....</Modal.Content>
        </Modal>
      )}
    </OverlayContainer>
  );
};

tsx

Custom content

If you want to use the Modal component to show custom elements instead of the Modal.Content (which renders the card), you can pass an element inside it.

import {
  Modal,
  OverlayContainer,
  useOverlayContext,
  Button,
  Title,
  Card,
} from "@wonderflow/react-components";

export const CustomModalContent = () => {
  const { onClose, titleId } = useOverlayContext();

  return (
    <Card>
      <Title id={titleId} level="4">
        My custom modal title
      </Title>
      <Button onClick={onClose} icon="xmark">
        Close modal
      </Button>
    </Card>
  );
};

export const PageExample = () => {
  const [visible, setVisible] = useState<boolean>(false);

  return (
    <>
      <Button onClick={() => setVisible(true)}>Show Modal</Button>
      <OverlayContainer onClose={() => setVisible(false)}>
        {visible && (
          <Modal>
            <CustomModalContent />
          </Modal>
        )}
      </OverlayContainer>
    </>
  );
};

tsx

API Reference

Property

Type

Default

closeOnClickOutside

boolean

true

Modal.Content

Property

Type

Default

title*

ReactNode

theme

enum

"light"

Accessibility

Adheres to the dialog role requirements.

Keyboard interactions

tab

Moves focus to the next focusable element inside the modal

shif + tab

Moves focus to the previous focusable element inside the modal

esc

Close the modal and move the focus on the trigger element