8

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.

enter image description here

enter image description here

1
  • It's worth mentioning that the Color usage guidelines say that when "red is a brand color, don’t also use it to convey an error state." While error states and destructive actions are different things, the point is that the meaning of color should be consistent throughout the app.
    – Domino
    Jul 31, 2021 at 15:31

3 Answers 3

4

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

enter image description here enter image description here

1

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.

1

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

emphasize or de-emphasize button

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.