Skip to content


The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.

Note: You'll need to manage the isOpen state in a wrapper component of your own. For documentation purposes only we've created a mock State to handle this, but you should handle the state in the component you consume Dialog in or in a wrapper component.

You can also pass any non-text content into the header:

System props

Dialog components get the COMMON and LAYOUT categories of system props. Dialog.Header components get COMMON, LAYOUT, and FLEX system props. Read our System Props doc page for a full list of available props.

Component props

Prop nameTypeDescription
isOpenBooleanSet whether or not the dialog is shown
onDismissFunctionA user-provided function that should close the dialog

Dialog.Header does not take any non-system props.

Edit this page on GitHub
2 contributorsemplumsacknosyn
Last edited by emplums on July 1, 2020