Dialog

A modal dialog that prompts for user input or confirmation
The dialog displays in front of and deactivates the rest of the view. It is used to focus the user to collect input or relay an important message.

Confirmation dialog

Often dialogs are used for confirming dangerous user actions. To support this simple case, you add a confirm prop to any Button or Table row action to show a confirmation dialog before the button's action (onClick or task) is executed.
If the user clicks the Cancel button, the action will not be executed.
The dialog title, body, and buttons can be customized.
You can also manually create a confirmation dialog for more complex usecases. Simply include the ConfirmationDialog component anywhere in your view and open and close it using Component state.

Dialog

For usecases other than confirmation, use the Dialog component. You have full control over the content of the dialog.

Component API

Dialog API

NameDescriptionDefault
id
string
The ID referenced by the global component state
defaultOpened
boolean
Whether the dialog is open initially.
opened
boolean
Whether the dialog is open.
onClose
() => void
Called when the dialog is closed.
size
"xs" | "sm" | "md" | "lg" | "xl"
Dialog body width
md
children
Component
Dialog content
radius
"xs" | "sm" | "md" | "lg" | "xl"
Dialog radius
lg
title
Component
Dialog title, displayed in header before close button
padding
number | "xs" | "sm" | "md" | "lg" | "xl"
Dialog padding
lg
withCloseButton
boolean
Whether the dialog has a close button on the top right.
true
fullScreen
boolean
Whether the dialog should take up the entire screen.
true

Confirmation API

NameDescriptionDefault
opened
boolean
Whether the dialog is open.
onClose
() => void
Called when the dialog is closed.
size
"xs" | "sm" | "md" | "lg" | "xl"
Dialog body width
md
children
Component
Dialog content
radius
"xs" | "sm" | "md" | "lg" | "xl"
Dialog radius
lg
title
Component
Dialog title, displayed in header before close button
padding
number | "xs" | "sm" | "md" | "lg" | "xl"
Dialog padding
lg
withCloseButton
boolean
Whether the dialog has a close button on the top right.
true
fullScreen
boolean
Whether the dialog should take up the entire screen.
true
onConfirm
() => void
Callback when the dialog is confirmed
cancelText
string
Text on the cancel button. An empty string indicates that a cancel button should not be rendered.
Cancel
confirmText
string
Text on the Confirm button.
Confirm
id
string
The ID referenced by the global component state
defaultOpened
boolean
Whether the dialog is open initially.

State API

NameDescription
opened
boolean
Whether the dialog is opened
open
() => void
Open the dialog
close
() => void
Close the dialog