What is the best practice for "delete" buttons in material design?

Question

A lot of design systems/ style guides define red as the color for "delete"/ "erase"/ uninstall/ error buttons. In material design, I didn't find this specified. So, what is the best practice?

I think the options are:

• button with the primary color as background;
• button with the secondary color as background;
• button with the red as background;
• link.

Answer 1

Well, after going over the documentation it appears to me that when it comes to how the button should appear, the rule is that there is no rule.

However, there are a few things to take note of per their docs:

1. Avoid using floating action buttons for minor and destructive actions.
2. Affirmative actions are placed on the right side and continue the process. Affirmative actions may be destructive, like “Delete” or “Remove.”

Other than that, you're free to style your buttons as you wish.

Now, personally, I believe destructive behavior is always something you should treat with special care by either asking the user to confirm their action or allowing them to undo it. Of course, that has nothing to do with color. When it comes to the appearance of the button, I think common conventions apply, which has been discussed elsewhere on this site.

I would argue that the guidelines imply using the secondary color is what you should do. The screenshot you used for the pizza app shows the secondary color for uninstall (which is a pretty destructive behavior) for both the good and bad options when pondering if you should add a background to your buttons.

Thus, my vote is for option 2 (most of the time): button with the secondary color as background

Answer 2

In dialogs (like your first screenshot), the standard is:

Dialog actions use system colors by default, but they should reflect your product's color palette. Use a contrasting color, such as the palette’s accent color, to distinguish dialog actions from dialog content.

Disabled buttons (whether links or buttons) should look disabled until they become available.

For non-dialog buttons, be sure the destructive button is on the right and prompts confirmation. A strong solid color is a good enhancement - just don't make the "cancel" button look disabled by contrast. Red can be used to emphasize the destructiveness (this is seen frequently in iOS design) but if it's a brand color, it might be used everywhere in the app.

Answer 3

You can emphasize or de-emphasize an element depending on it's function. Destructive actions can be de-emphasized.