DialogTitle

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>Dialog title</DialogTitle>
 
  <DialogContent>Content</DialogContent>
 
  <DialogControls>
    <Button variant={'outlined'} onClick={() => {setIsVisible(false)}}>Close</Button>
  </DialogControls>
</Dialog>

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

Dialog title


<DialogTitle>Dialog title</DialogTitle>

Customization

The background-color of the dialog-title can be changed based on the dialog’s context.

Expand code


<Button variant={'outlined'} onClick={() => {setIsVisible(true)}}>Show Dialog</Button>
 
<Dialog size={'small'} open={isVisible} onCancel={() => setIsVisible(false)}>
  <DialogTitle color={'success'}>Dialog title</DialogTitle> // one of 'info' | 'success' | 'warning' | 'error'
 
  <DialogContent>Content</DialogContent>
 
  <DialogControls>
    <Button variant={'outlined'} onClick={() => {setIsVisible(false)}}>Close</Button>
  </DialogControls>
</Dialog>

Accessibility

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

Expand code


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

Props

Name	Type	Default	Description
children	`node`	-	Content of the component
color	`info` \| `success` \| `warning` \| `error`	-	Set the color of the component
id	`string`	-	Set the `id` attribute