Modal dialog
A modal dialog shows content that needs a response, in a layer that covers the page.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
pnpm add @wolf-rayet/reactimport '@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.
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen * | boolean | None | Whether the modal is shown. You control the open state, not the modal. |
| onClose * | () => void | None | Called on the close button, on Escape and on a click outside. Handle all three the same way. |
| children * | ReactNode | None | 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 needs it. |
| label * | string | None | Names the dialog for assistive technology. Usually the same words as the title. |
ModalHeader props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The content. Header, body and footer in that order. |
ModalTitle props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The content. Header, body and footer in that order. |
| appearance | 'danger' | None | Danger colours the title, for a dialog confirming something that cannot be undone. |
ModalBody props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The content. Header, body and footer in that order. |
ModalFooter props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| children * | ReactNode | None | The content. Header, body and footer in that order. |
| isSpread | boolean | None | Pushes the footer actions apart, so a destructive action is harder to click 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 and a click on the blanket both close it, through the same onClose.
- The label names the dialog. A screen reader announces it when focus moves in.
- The blanket tint is measured, and is darker in the dark theme.