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.

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.

withCloseButton
optional
default: true
boolean

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

State API
close
() => void

Close the dialog

open
() => void

Open the dialog

opened
boolean

Whether the dialog is opened

PrivacyTermsSupport