Dialog
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
confirm
prop to any Button
or Table
row action to show a confirmation dialog before the
button's action (onClick
or task
) is executed.Cancel
button, the action will not be executed.tsxCopied1<Button onClick={() => showNotification({ message: "Confirmed!", type: "success" })} confirm>2Confirm3</Button>
tsxCopied1<Button2onClick={() => showNotification({ message: "Confirmed!", type: "success" })}3confirm={{4title: "Do you want to click the button?",5body: "Clicking the button is potentially irreversible",6confirmText: "Yes",7cancelText: "Take me back",8}}9>10Button11</Button>
ConfirmationDialog
component anywhere in your view and open and close it using
Component state.tsxCopied1const { id, open, close } = useComponentState();2return (3<>4<Confirmation5id={id}6title="Confirmation dialog"7onConfirm={() => {8showNotification({ message: "Confirmed!", type: "success" });9close();10}}11/>12<Button onClick={open}>Open confirmation dialog</Button>13</>14);
Dialog
Dialog
component. You have full control over the
content of the dialog.tsxCopied1const { id, open, close } = useComponentState();2return (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
Dialog content.
Whether the dialog is open initially.
Whether the dialog should take up the entire screen.
The ID referenced by the global component state.
Called when the dialog is closed.
Whether the dialog is open.
Dialog padding.
Dialog radius.
Dialog body width.
Dialog title, displayed in header before close button.
Whether the dialog should trap focus.
Whether the dialog has a close button on the top right.
Confirmation API
Text on the cancel button. An empty string indicates that a cancel button should not be rendered.
Dialog content.
Text on the Confirm button.
Whether the dialog is open initially.
Whether the dialog should take up the entire screen.
The ID referenced by the global component state.
Called when the dialog is closed.
Callback when the dialog is confirmed.
Whether the dialog is open.
Dialog padding.
Dialog radius.
Dialog body width.
Dialog title, displayed in header before close button.
Whether the dialog should trap focus.
Whether the dialog has a close button on the top right.
State API
Close the dialog
Open the dialog
Whether the dialog is opened