Dialogs

Dialogs can give an interface a way to expand the viewport real estate.

The simplest dialog is an Alert.

Show alert

<Alert title="On no!" onClose={() => setShow(false)}>
  This is an alert!
</Alert>

Here, we can interact with dialogs. Please choose the size you want to see and whether you want the dialog to be expandable, then click the 'Show dialog' button.

Dialog size

sm

md

lg

xl

Initially Expanded

Expandable

Show dialog

<Dialog
  onClose={() => setShow(false)}
  onOkay={() => setShow(false)}
  title="Some sort of title"
  size={size}
  expandable={expandable}
>
  Example of a 'normal' dialog
</Dialog>