Popup
A popup displays brief content in an overlay.
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 { Popup } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| isOpen * | boolean | None | Whether the popup is shown. You control the open state. |
| onClose * | () => void | None | Called on Escape and on a click outside. |
| trigger * | (props: { 'aria-expanded': boolean; 'aria-haspopup': true; onClick: () => void }) => ReactNode | None | A function that returns the element the popup opens from. Spread the props it receives onto that element, because they include the expanded state. |
| content * | ReactNode | None | What appears in the surface. |
| placement | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom-start' | Which corner it opens from. It flips when there is no room. |
| isDialog | boolean | None | Adds padding for text content. Leave it off for a menu, which has its own padding. |
| label | string | None | Names the surface for assistive technology when it holds a dialog rather than a menu. |
Accessibility
What the component does for you, and what it needs from you.
- The props passed to the trigger include the expanded state. Spread them onto it, or the button will not announce that it opens something.
- Escape closes the popup and focus goes back to the trigger.
- Focus stays inside the popup while it is open, so keyboard users do not end up on the page behind it.
- In the dark theme, the shadow gets a thin ring, because a shadow alone does not separate the popup from the page.