Modal
Dialog or confirmation modal selected with a required kind and delegated trigger.
Choose kind="dialog" for a short task or form that needs page context. Choose kind="confirmation" for a consequential choice with explicit Cancel and Confirm actions. On narrow screens, the dialog uses the available viewport width and keeps its fields contained.
Interactive example
Loading interactive example
Modal
Modal places a focused task above the current page and returns focus when the task closes.
Purpose
Use Modal for short decisions and forms that need page context. Set kind on every Modal. Use dialog for forms and short tasks. Use confirmation only when the user must explicitly accept or cancel a consequential decision. Move long or navigable work to a page or Sheet.
Anatomy
Modal combines a consumer-owned trigger, dialog surface, title, description, content, and optional footer actions. The trigger snippet receives delegated props; spread them onto its one real interactive element. kind="dialog" uses Dialog behavior for forms and tasks. kind="confirmation" uses alert-dialog semantics and explicit Cancel and Confirm actions for consequential decisions. Bind the open state when application code must close the dialog after a save. Give every Modal a task-specific title and add a description when the consequence needs context. The dialog keeps focus inside its surface, closes with Escape when dismissible, and restores focus after closing.
Tokens and style hooks
Modal uses surface, border, shadow, radius, overlay, motion, and floating-layer tokens. A scoped Provider keeps its portal inside the active boundary.
API
Inherited prop contracts
Omit<ModalBaseProps, 'title'>Props from this native base are accepted except the listed members.
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
cancelLabel | string | prop | No | 'Cancel' |
children | Snippet | snippet | No | undefined |
closeLabel | string | prop | No | 'Close' |
confirmLabel | string | prop | No | 'Continue' |
confirmVariant | ModalConfirmVariant | prop | No | 'primary' |
description | string | prop | No | undefined |
dismissible | boolean | prop | No | true |
footer | Snippet | snippet | No | undefined |
kind | 'confirmation' | 'dialog' | prop | Yes | |
onCancel | () => void | callback | No | undefined |
onConfirm | () => void | callback | No | undefined |
open | boolean | binding | No | false |
size | ModalSize | prop | No | 'md' |
title | string | prop | No | undefined |
trigger | Snippet<[Record<string, unknown>]> | snippet | No | undefined |