Modal

v0.4.2

Stable

A `Card` centered in the viewport with a dimmed backdrop that blocks interaction with the rest of the page, built on [Radix `Dialog`](https://www.radix-ui.com/primitives/docs/components/dialog) for focus trapping, Escape-to-close, and outside-click-to-close. It has no opinion on what goes inside the panel — an optional `title` renders a header with a close button, otherwise just the `children` are shown.

pnpm add @behivetech/atoms.modal

Examples of v0.4.2 are shown as code; only the latest version runs live. Open the live examples →

Basic Modal

1const BasicModal = () => (
2  <Modal onClose={() => {}} title="Add Block">
3    Modal content
4  </Modal>
5);
6
7render(<BasicModal />);

Modal Without Title

1const ModalWithoutTitle = () => (
2  <Modal onClose={() => {}}>Modal content, no header</Modal>
3);
4
5render(<ModalWithoutTitle />);

Modal With Footer

1const ModalWithFooter = () => (
2  <Modal
3    onClose={() => {}}
4    title="Gallery image"
5    padding="md"
6    footer={
7      <>
8        <button type="button">Cancel</button>
9        <button type="button">Save</button>
10      </>
11    }
12  >
13    Content that scrolls while the footer buttons stay in view.
14  </Modal>
15);
16
17render(<ModalWithFooter />);