Maple · Overlays

Modal

Focused dialogs that pause the page for a decision. Keep one primary action on the right; the close button and Cancel both dismiss.

View in Storybook →

Dialog

Click the button. Esc, the close button, Cancel and the backdrop all dismiss.

Rename project

Everyone on the team will see the new name.

<Modal
  open={open}
  onClose={() => setOpen(false)}
  title="Rename project"
  subtitle="Everyone on the team will see the new name."
  footer={<>
    <Button variant="outline" onClick={close}>Cancel</Button>
    <Button onClick={save}>Save changes</Button>
  </>}
>
  <Input defaultValue="Maple website" />
</Modal>

Props

PropTypeDefaultDescription
openboolean—Visibility.
onClose() => void—Called on Esc, backdrop or close.
titleReactNode—Title.
subtitleReactNode—Supporting line.
size"s" | "m""s"400 / 560px wide.
footerReactNode—Buttons, primary on the right.

Usage

Do

  • Keep one primary action, on the right.
  • Let Esc and Cancel dismiss.

Don't

  • Stack modals on modals.