Dialog

A modal window that informs users about a task and can contain critical information or require actions.

Showcase
Are you sure you want to exit?

You have not saved your changes yet.

If you exit without saving, changes will be lost.

Are you sure you want to exit?

Source
<Dialog
  title="Are you sure you want to exit?"
  closeCallback={() => console.log('Closing the dialog...')}
  danger
>
  <div slot="title-icon">
    <AlertTriangleIcon size="25" />
  </div>
  <p>You have not saved your changes yet.</p>
  <p>If you exit without saving, changes will be lost.</p>
  <p>Are you sure you want to exit?</p>
  <Button>yes, exit</Button>
</Dialog>

Properties #

Style Properties

Name
Default
Type
Description
danger false boolean Applies the danger color to the title (including the icon slot if it is stylable with the CSS color property).
constrainWidth false boolean Gives the dialog a max-width of 30em.

Functional Properties

Name
Default
Type
Description
title null string Adds a title to the dialog.
closeCallback null Function Adds a close button to the dialog and calls this function when it is clicked.

Class Properties

All <Dialog> components use the .dialog class.

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to add to the component.
titleClass null string A class string to add to the title div.

Slots #

Default slot

The content of the dialog.

close-icon slot

The icon used inside the close button. Defaults to Feather icons' X. Only used when closeCallback is supplied.

title-icon slot

The icon prepended before the title. Only used when title is supplied.

SCSS Variables #

Name
Description
Default
$main The color of the title (if supplied).
#4300B0
$shadow-raised The shadow of the dialog.
hover me
0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
$dialog-radius The curvature radius of a dialog. 1.5625em
$bold-font-weight The title's font weight. 500
$danger The color of the title when using the danger variant of a dialog.
#B80000
$button-radius From Button The curvature radius of the X button (if the close callback is supplied). 1.5625em
$dark From Button The color of the X button (if the close callback is supplied).
#333333