Dialog

A modal window on window glass.

Base UI DialogSource

With a header

Dialog.Header shows the title and a close button. Put the content in Dialog.Body.

With a form

Wrap the body and the footer in a form with the contents class. The submit button stays in the footer, and Enter submits the form.

Long content

Put long content in Dialog.Body. The dialog is never taller than the screen. The body scrolls, and the header and footer stay fixed.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Use a dialog for a focused task that interrupts the page. When the user must decide before going on, use AlertDialog. For a panel from a screen edge, use Drawer. For light content next to a trigger, use Popover.
  • Every dialog needs a title. Use Dialog.Header, or put Dialog.Title in the body.
  • Pass a width class, such as max-w-2xl, to Dialog.Popup to change its width.

API

Props that the library adds. Every part also takes all the Base UI props.

Dialog.Body

PropTypeDefaultDescription
classNamestring–Classes that replace the default layout or padding.
childrenReactNode–The content of the dialog.

Dialog.Footer

PropTypeDefaultDescription
separatorbooleanfalseAdds a top divider and equal padding above and below the actions. Use it with long content.
classNamestring–Classes that replace the default layout or padding.
childrenReactNode–The actions of the dialog.

Dialog.Header

PropTypeDefaultDescription
childrenReactNode–The title text. The header labels the dialog with it.
showCloseButtonbooleantrueShows a close button at the right of the header.
classNamestring–Classes for the header.

Dialog.Popup

PropTypeDefaultDescription
containerHTMLElement | ShadowRoot | RefObject | null–The element that the dialog renders into. The default is the document body.