Dialog Layout


Interface of DialogContent
🏗 Coming Soon

Using the DialogContent component quickly gives your content consistent spacing inside a dialog component as well as managing overflow of content of the dialog is taller than the viewport.

DialogContent supports all Box properties.

If content overflows the component's height an visual indicator of content that extends beyond the visible edges is added (border on top and shadow on the bottom).

Scroll down here...


Interface of DialogHeader
🏗 Coming Soon

DialogHeader is attached to the top of dialog and provides a button to close the containing Dialog. Uses the DialogContext to get access to the close callback.

DialogHeader supports all Box properties.

  • hideClose property remove the "close" IconButton
  • detail property allows the developer to specify a ReactNode that will replace the "close" IconButton

This is a DialogHeader


Interface of DialogFooter
🏗 Coming Soon

DialogFooter is attached to the bottom of dialog. Generally, the terminal action for a dialog as well as an option to abandon the process done via the dialog are available within this component. This component is generally used in combination with the DialogContext.Provider to get access to the DialogContext.close() method.

DialogFooter supports all Box properties.

Example content