Dialog

A dialog component appears on top of the main content. It typically requires user interaction before allowing them to return to the main content, often used for displaying important information, asking for user input, or confirming actions.

Expand code


<Button variant={'outlined'} onClick={() => {setIsVisible(true)}}>Show Dialog</Button>
 
<Dialog open={isVisible} onCancel={() => {setIsVisible(false)}}>
  <DialogTitle>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span>Dialog message</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setIsVisible(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

The content of the dialog can be constructed using dialog-specific components (e.g DialogTitle), custom HTML, or a combination of both.

Sizes

You can render the dialog in three different sizes: small, medium and large.
By default, the dialog size will be determined by its content.

Expand code


<Button variant={'outlined'} onClick={() => {setShowSmall(true)}}>Small Dialog</Button>
<Button variant={'outlined'} onClick={() => {setShowMedium(true)}}>Medium Dialog</Button>
<Button variant={'outlined'} onClick={() => {setShowLarge(true)}}>large Dialog</Button>
 
<Dialog open={showSmall} size={'small'} onCancel={() => {setShowSmall(false)}}>
  <DialogTitle>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span>Dialog message</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setShowSmall(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setShowSmall(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>
 
<Dialog open={showMedium} size={'medium'} onCancel={() => {setShowMedium(false)}}>
  <DialogTitle>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span>Dialog message</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setShowMedium(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setShowMedium(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>
 
<Dialog open={showLarge} size={'large'} onCancel={() => {setShowLarge(false)}}>
  <DialogTitle>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span>Dialog message</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setShowLarge(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setShowLarge(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

Scrolling

The scrollable prop overrides the default behaviour that would normally disable scrolling while the dialog is open.

Expand code


<Button variant={'outlined'} onClick={() => {setIsVisible(true)}}>Show Dialog</Button>
 
<Dialog open={isVisible} scrollable onCancel={() => {setIsVisible(false)}}>
  <DialogTitle>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span>Dialog message</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setIsVisible(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

OnCancel Callback

The onCancel event will run whenever users close the dialog with the Escape key.

The onCancel & disableEscapeKey props are mutually exclusive.

DisableEscapeKey

You can prevent users from closing the dialog with the escape key.

Expand code


<Button variant={'outlined'} onClick={() => {setIsVisible(true)}}>Show Dialog</Button>
 
<Dialog open={isVisible} disableEscapeKey>
  <DialogTitle>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span>Dialog message</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setIsVisible(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

Accessibility

The ariaModal, describedby and labelledby props can be used to provide additional accessibility information for users.
If the ariaModal prop is provided, the role of the dialog will change from dialog to alertdialog.

Expand code


<Button variant={'outlined'} onClick={() => {setIsVisible(true)}}>Show Dialog</Button>
 
<Dialog open={isVisible} ariaModal labelledby={'dialog-title'} describedby={'dialog-content'}  onCancel={() => {setIsVisible(false)}}>
  <DialogTitle id={'dialog-title'}>Simple dialog</DialogTitle>
 
  <DialogContent>
    <span id={'dialog-content'}>This text will be used for the <q>aria-describedby</q> property</span>
    <span>Additional context</span>
  </DialogContent>
 
  <DialogControls>
    <Button variant={'text'} onClick={() => {setIsVisible(false)}}>Confirm</Button>
 
    <Button variant={'text'} color={'error'} onClick={() => {setIsVisible(false)}}>Cancel</Button>
  </DialogControls>
</Dialog>

Props

Name	Type	Default	Description
ariaModal	`Booleanish`	-	Set the `aria-modal` attribute
children	`node`	-	Content of the component
dark	`boolean`	false	Use the darkmode style
describedby	`string`	-	Set the `aria-describedby` attribute
disableEscapeKey	`boolean`	false	Prevent users from closing the dialog with the Escape key ⚠️ Mutually exclusive with `onCancel`
labelledby	`string`	-	Set the `aria-labelledby` attribute
onCancel	`func`	-	Callback function whenever users press the Escape key
onClickBackdrop	`func`	-	Callback function whenever users click the backdrop
open	`boolean`	-	Controls whether the dialog is visible or not
scrollable	`boolean`	false	Toggles the ability to scroll the background