DialogContent

This component is a utility component designed for the Dialog component.

Expand code


<Button variant={'outlined'} onClick={() => setIsVisible(true)}>Show Dialog</Button>
 
<Dialog size={'small'} open={isVisible} onCancel={() => setIsVisible(false)}>
  <DialogTitle>Title</DialogTitle>
 
  <DialogContent>
    Dialog content
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Close</Button>
  </DialogControls>
</Dialog>

Since dialogContent is a utility component, using it outside the dialog component will just render the content of the component:

Dialog content


<DialogContent>Dialog title</DialogContent>

Customization

You can separate the content of the dialog from other elements by using the divider prop.

Expand code


<Button variant={'outlined'} onClick={() => setIsVisible(true)}>Show Dialog</Button>
 
<Dialog size={'small'} open={isVisible} onCancel={() => setIsVisible(false)}>
  <DialogTitle>Title</DialogTitle>
 
  <DialogContent divider>
    <span>The dialog content is separated from the title and the controls</span>
    <p>Additional dialog context</p>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Close</Button>
  </DialogControls>
</Dialog>

Accessibility

Use the id prop in combination with the dialog’s describedby prop to add additional context for Accessibility-Tools.

Expand code


<Button variant={'outlined'} onClick={() => setIsVisible(true)}>Show Dialog</Button>
 
<Dialog size={'small'} describedby={'dialog-content'} open={isVisible} onCancel={() => setIsVisible(false)}>
  <DialogTitle>Title</DialogTitle>
 
  <DialogContent id={'dialog-content'}>
    Dialog content
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Close</Button>
  </DialogControls>
</Dialog>

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
divider	`boolean`	-	Enables divider styles
id	`string`	-	Set the `id` attribute