Delete

Use these patterns to allow a user to destroy an object.

Status
alpha

This is an ALPHA pattern, and we need your feedback!

If you have feedback or ideas on this particular pattern, please create a GitHub Discussion. If you have feedback on the documentation of patterns as a whole, please let us know. We need your feedback to make our patterns better!


Ingredients#

Button

// import all ingredients for the delete patterns
import {
Button,
Modal, ModalBody, ModalFooter, ModalFooterActions, ModalHeader, ModalHeading,
Input, Label, HelpText,
Toast
} from '@twilio-paste/core

Usage#

General#

The delete pattern should be utilized 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 triggered by a destructive Button.
  • Generally be placed at the bottom of an Object Details page.
  • Not usually 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 certain guidelines based on the severity of the deletion.

Variations#

Low-severity#

A deletion is considered low-severity when it is trivial to undo the deletion or recreate the deleted data.

Low-severity deletions can be triggered by a single click and do not require further warning or confirmation.

Medium-severity#

A deletion is considered medium-severity when the action cannot be undone, and the data cannot be recreated easily. This pattern is also useful for bulk deletions of low- or medium-severity.

For medium-severity deletions, show a confirmation modal that explains what is being deleted and the consequences of the deletion.

modal with a destrctive button to confirm deletion

High-severity#

A deletion is considered high-severity when the action cannot be undone, and it would be very time-consuming, or perhaps impossible, to recreate the deleted data. An action that deletes a large amount of data or has significant downstream impact would also be considered a high-severity deletion.

For high-severity deletions, show a confirmation modal that explains what is being deleted and the consequences of the deletion, and have the user manually confirm the deletion by typing the name of the object they are deleting.

modal with an input and a destructive button to confirm deletion

Post-deletion#

After the user has deleted the object, navigate them to the index page, where they can see a list of all remaining objects, and show a success Toast informing them that the object has successfully been deleted. If it is possible to undo the deletion, give the user the option to do so, and tell them how long they have to undo the deletion if it is time-bound.

If the delete action fails, keep the modal open and display an error Toast that explains what went wrong and how to try again.

For more information, check out our Notifications and Feedback patterns.

Starter kits#

CodeSandbox#

Coming soon

Sketch#

Coming soon

Support

If you need support, please open a new issue in our GitHub repository. Please try to provide as much detail as possible in your issue.

Contributing

The Paste design system is open source and contributions are welcome. Check out the project on GitHub to learn more about contributing.

Copyright © 2020 Twilio, Inc.