Handling destructive actions
Shortcut key: sq-ui-modal-delete-confirmation
When you delete a file or folder, you can choose to send it to the Recycle Bin or to permanently delete it. You can also choose to permanently delete a file or folder without sending it to the Recycle Bin.
Being destructive or high severity doesn’t automatically mean a button should be big, red, and bold.
If a destructive action isn’t the primary action on the page, it might be better to give it a secondary or tertiary button treatment.
Combine this with a confirmation step where the destructive action actually is the primary action, and apply the big, red, bold styling there.
Example code
{
/* Delete confirmation modal */
}
<Modal
wrapClassName="app-modal-flat"
closable={false}
centered
title={null}
destroyOnClose
footer={null}
visible={showTemplateDeleteConfirmationPopup}
maskClosable={false}
>
<div className="rounded-lg">
<div className="p-8">
<div className="text-xl font-medium mb-4">
Delete template <strong>{selectedTask?.name}</strong>?
</div>
<div className="font-medium text-gray-600">
Are you sure you want to delete this template? Once deleted this action
can not be undone and this template will not be available for creating
tasks.
</div>
</div>
<div className="px-8 py-4 rounded-b-lg flex space-x-2 justify-end bg-gray-100">
<div>
<Button
type="text"
size="large"
onClick={() => {
setShowTemplateDeleteConfirmationPopup(false);
}}
>
Cancel
</Button>
</div>
<div>
<Button
type="primary"
size="large"
danger
loading={deletingTemplate}
onClick={() => {
deleteTemplate(selectedTask?.id);
}}
>
{deletingTemplate ? "Deleting..." : "Delete"}
</Button>
</div>
</div>
</div>
</Modal>;