Dialog

The Dialog component displays information in front of the view 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.
tsx
Copied
1
<Button onClick={() => showNotification({ message: "Confirmed!", type: "success" })} confirm>
2
Confirm
3
</Button>
The dialog title, body, and buttons can be customized.
tsx
Copied
1
<Button
2
onClick={() => showNotification({ message: "Confirmed!", type: "success" })}
3
confirm={{
4
title: "Do you want to click the button?",
5
body: "Clicking the button is potentially irreversible",
6
confirmText: "Yes",
7
cancelText: "Take me back",
8
}}
9
>
10
Button
11
</Button>
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.
tsx
Copied
1
const { id, open, close } = useComponentState();
2
return (
3
<>
4
<Confirmation
5
id={id}
6
title="Confirmation dialog"
7
onConfirm={() => {
8
showNotification({ message: "Confirmed!", type: "success" });
9
close();
10
}}
11
/>
12
<Button onClick={open}>Open confirmation dialog</Button>
13
</>
14
);

Dialog

For usecases other than confirmation, use the Dialog component. You have full control over the content of the dialog.
tsx
Copied
1
const { id, open, close } = useComponentState();
2
return (
3
<>
4
<Dialog id={id} title="Dialog title" onClose={close}>
5
<Stack>
6
<Title>Dialog content</Title>
7
<Text>I am in a dialog</Text>
8
<Button>Button in a dialog</Button>
9
</Stack>
10
</Dialog>
11
<Button onClick={open}>Open dialog</Button>
12
</>
13
);

Component API

Dialog API

children
REQUIRED
React.ReactNode

Dialog content.

defaultOpened
optional
boolean

Whether the dialog is open initially.

fullScreen
optional
Default
true
boolean

Whether the dialog should take up the entire screen.

id
optional
string

The ID referenced by the global component state.

onClose
optional
() => void

Called when the dialog is closed.

opened
optional
boolean

Whether the dialog is open.

padding
optional
Default
lg
number | "xs" | "sm" | "md" | "lg" | "xl"

Dialog padding.

radius
optional
Default
lg
"xs" | "sm" | "md" | "lg" | "xl"

Dialog radius.

size
optional
Default
md
string | number

Dialog body width.

title
optional
React.ReactNode

Dialog title, displayed in header before close button.

trapFocus
optional
Default
true
boolean

Whether the dialog should trap focus.

withCloseButton
optional
Default
true
boolean

Whether the dialog has a close button on the top right.

Confirmation API

cancelText
optional
Default
Cancel
string

Text on the cancel button. An empty string indicates that a cancel button should not be rendered.

children
optional
React.ReactNode

Dialog content.

confirmText
optional
Default
Confirm
string

Text on the Confirm button.

defaultOpened
optional
boolean

Whether the dialog is open initially.

fullScreen
optional
Default
true
boolean

Whether the dialog should take up the entire screen.

id
optional
string

The ID referenced by the global component state.

onClose
optional
() => void

Called when the dialog is closed.

onConfirm
REQUIRED
() => void

Callback when the dialog is confirmed.

opened
optional
boolean

Whether the dialog is open.

padding
optional
Default
lg
number | "xs" | "sm" | "md" | "lg" | "xl"

Dialog padding.

radius
optional
Default
lg
"xs" | "sm" | "md" | "lg" | "xl"

Dialog radius.

size
optional
Default
md
string | number

Dialog body width.

title
optional
React.ReactNode

Dialog title, displayed in header before close button.

trapFocus
optional
Default
true
boolean

Whether the dialog should trap focus.

withCloseButton
optional
Default
true
boolean

Whether the dialog has a close button on the top right.

State API

close
optional
() => void

Close the dialog

open
optional
() => void

Open the dialog

opened
optional
boolean

Whether the dialog is opened