Modal

A dialog that blocks the page until it is closed. Pick it for a short task, such as a form or a choice, that must finish before going on; the body scrolls and the actions stay in view.

Modal

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Modal

Dark theme, Modal

High contrast theme, Modal

See it in actionLink to the section See it in action

Focus moves into the Modal, stays inside it and goes back to the button on Escape.

UsageLink to the section Usage

tsx

import { Modal } from '@skribly/ui/overlays'

tsx

<Modal
  trigger={<Button>Rename project</Button>}
  title="Rename project"
  closeLabel="Close"
  footer={<><Button variant="outline" slot="close">Cancel</Button><Button onPress={save}>Save</Button></>}
>
  <TextField label="Project name" />
</Modal>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Focus moves into the dialog, Tab stays inside it, Escape and the close button close it, and focus goes back to the trigger.
The title names the dialog and the description describes it.
The rest of the page is hidden from screen readers while it is open.
Built to WCAG 2.2 AA.

This demo runs through axe in all three themes on every test run. See what the tests check.