Delete

// import all ingredients for the delete patterns

import {​ Button } from "@twilio-paste/core/button";
import { AlertDialog } from "@twilio-paste/core/alert-dialog";
import { Input } from "@twilio-paste/core/input";
import { Label } from "@twilio-paste/core/label";
import { HelpText } from "@twilio-paste/core/help-text;
import { Toast } from "@twilio-paste/core/toast";

The delete pattern should be used when a user is destroying an object. It is critical to communicate delete actions to our users in a consistent way, considering deletions come with significant consequences and often cannot be undone.

The delete action should:

• Be initiated by a destructive Button.
• Rarely be the primary action on the page. There are many variants of differing visual prominence to choose from to achieve the correct hierarchy for the delete action trigger.
• Follow guidelines based on the severity of the deletion.

Medium and high severity delete confirmations are displayed using an Alert Dialog, since it requires the user to interact with the component.

Delete messages should follow the Confirmation pattern.

Avoid using negative contractions like can't or won't, since user comprehension can suffer in stressful scenarios.

A deletion is considered low-severity when users can easily undo the deletion or recreate the deleted data.

Warning or confirmation messages are not necessary for low-severity deletions.

A deletion is considered medium-severity if either of the following are true:

• The user action cannot undo the deletion or easily recreate the data.
• The user is performing a bulk deletion of low- or medium-severity.

Show a confirmation message that explains what is being deleted and the consequences of the deletion.

A deletion is considered high-severity if any of the following are true:

• The user action cannot undo the action and recreating the deleted data would be highly time consuming or impossible.
• The user is deleting a large a large amount of data that is not recoverable.
• The deletion will have significant downstream impact.

Show a confirmation message that explains what is being deleted and the consequences of the deletion, and have the user manually confirm the deletion by entering the name of the object they are deleting.

After the user deletes the object, navigate them to the original page where they can see a list of all remaining objects.

If the delete is successful, show a success Toast. If the user can undo the deletion, give the user the option to do so in the toast and remove any automatic time out settings. If the undo option is time-bound, tell the user how long they have to undo the deletion.

If the deletion fails, display an error Toast that follows the error state pattern.