Skip to contentWolf-Rayet

Modal dialog

A modal dialog displays content that requires user interaction in a layer that covers the page.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react
import '@wolf-rayet/react/css/wolf-rayet.css';
import { Modal, ModalHeader, ModalTitle, ModalBody, ModalFooter } from '@wolf-rayet/react';

Modal props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
isOpen *boolean—Whether the modal is shown. The open state belongs to you, not to the modal.
onClose *() => void—Called on the close button, on Escape and on a click outside. Treat all three as the same intent.
children *ReactNode—The content. Header, body and footer in that order.
width'small' | 'medium' | 'large' | 'xlarge''medium'Small for a confirmation, medium for most things, larger only when the content genuinely needs it.
label *string—Names the dialog for assistive technology. Usually the same words as the title.

ModalHeader props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—The content. Header, body and footer in that order.

ModalTitle props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—The content. Header, body and footer in that order.
appearance'danger'—Danger colours the title, for a dialog confirming something that cannot be undone.

ModalBody props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—The content. Header, body and footer in that order.

ModalFooter props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
children *ReactNode—The content. Header, body and footer in that order.
isSpreadboolean—Pushes the footer actions apart, for a destructive action that should not sit under the pointer by accident.

Accessibility

What the component does for you, and what it needs from you.

  • The modal takes focus on open, keeps it inside while open, and returns it to whatever opened it on close.
  • Escape closes it, and so does the blanket, both through the same onClose.
  • The label names the dialog, which is what a screen reader announces on entry.
  • The blanket is measured rather than assumed, and darkens further in the dark theme.