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.

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

number | "xs" | "sm" | "md" | "lg" | "xl"

Dialog padding.

radius

optional

Default

"xs" | "sm" | "md" | "lg" | "xl"

Dialog radius.

size

optional

Default

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.

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

number | "xs" | "sm" | "md" | "lg" | "xl"

Dialog padding.

radius

optional

Default

"xs" | "sm" | "md" | "lg" | "xl"

Dialog radius.

size

optional

Default

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

optional

() => void

Close the dialog

open

optional

() => void

Open the dialog

opened

optional

boolean

Whether the dialog is opened