Modal

Usage and props

Use for a focused task without leaving the page. Keep open in application state and put the form or other content in children. Use header for a custom heading and footer for actions that stay visible while the body scrolls. Choose dialog, sheet or fullscreen with the layout prop.

openboolean

Whether the panel is open.

onOpenChange(open: boolean) => void

Update open when the trigger, close button or dismissal changes it.

titlestring

The accessible panel name. Also shown as the heading unless you supply header.

descriptionstring

A short task explanation. It remains visible below the default or custom heading.

triggerReactNode

One trigger element that accepts button props and a ref.

childrenReactNode

Your content in the scrollable body.

layout'dialog' | 'sheet' | 'fullscreen' (optional)

Choose the panel presentation. Defaults to dialog.

headerReactNode (optional)

Replaces the visible title. The title prop still supplies the accessible name.

footerReactNode (optional)

Your actions below the scrolling body. Set open to false from a cancel handler.

classNamestring (optional)

Adds a class to the panel surface in every layout.

styleCSSProperties (optional)

Inline styles for the panel surface, such as a custom width.

These are the main props for the example. The package's TypeScript declarations include the full API.

Customize and use with a keyboard