Overlay
Modal
A dialog that opens over a backdrop. While open, it keeps keyboard focus inside so you stay oriented.
ReactVueWeb Components
View in Storybook Playground
Examples
<Modal open={open} onClose={close} title="Confirm" footer={<Button>OK</Button>}>
Are you sure?
</Modal>Props
| Name | Type | Default | Description |
|---|---|---|---|
open required | boolean | — | Whether the modal is open. |
onClose required | () => void | — | Called when the modal requests to close (Escape, backdrop, close button). |
title | ReactNode | — | Dialog title (announced as the accessible name). |
footer | ReactNode | — | Footer content (e.g. action buttons). |
size | 'sm' | 'md' | 'lg' | md | Size. @default 'md' |
closeOnBackdrop | boolean | true | Close when the backdrop is clicked. @default true |
children required | ReactNode | — | Body content. |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.