Modal
A window over the page for a short task, a form or extra detail. People can always close it.
Master
Click the button to open it. Switch size and content. Escape, the ×, or a backdrop click closes.
Usage
Use Modal for work that can be dismissed: a short form or extra detail. One component: title, description, body (children) and footer come from props. Put kit Buttons in footer, size sm, subtle first and one strong brand Button last. Escape, the close button and a backdrop click all close it. For a must-choose confirm, use AlertDialog. See contracts/modal.json for the full contract. A portaled panel takes the theme of whatever opened it, so it is dark with a dark app frame even though it is drawn at the end of the page.
Do's
- A short form, like editing a customer.
- Extra detail that does not need its own page.
Don'ts
- Do not invent Dialog, DialogTrigger, DialogContent, ModalCard, Sheet or CommandDialog.
- Do not use for a must-choose confirm. Use AlertDialog.
- Do not put page navigation or long flows in a modal. Use a page.
- Do not put more than one strong brand Button in the footer.
- Do not hide the × unless the footer has a clear way out.
- Do not use raw hex.
<Modal
open={open}
title="Modal title"
description="One line that explains the task."
size="sm"
onClose={close}
/>