Revoking an invite - should confirmation banner be red or green?

Question

I'm working on a feature where a user can send/invite other people to their organization:

The user can opt to revoke the invite. Once this action has been done, I'd like to display a confirmation banner.

Since this banner is successfully revoking an intended action, should it be green? Part of me also thinks it should be red since it's removing someone which can possibly be done in error?

Answer 1

If it was the users action and the action is successful, then the toast should be green. That is always the case, even when the user chooses to delete something.

Red can be chosen as the color of the confirmation button if there is such a dialog. But never as a confirmation of action.

Are you sure you want to revoke the action?

No/cancel in neutral , Yes/revoke in red.

Answer 2

The problem poses three different states to solve with only two graphic answers. This can always lead to confusion. I think the wrong approach is in the working process, where an attempt is made to reach a solution without properly defining the approach. My working process would be the following:

1. As a starting point, I would define the exact meaning of each state in the entire app or web page
2. Create a graphic answer for each state, no matter how many they are
3. And finally see if some of these answers can be unified without affecting the state meaning

Definition of states (only for this case):

• Status #1: accept/yes/save/Ok
• Status #2: cancel/no
• State #3: revoke/refuse/reject

Graphic alternative for each state:

And only at the end of the process see what possibility exists to unify any of the states visually. It's clear that Accept and Cancel are antagonistic, so they cannot be the same.

If it's due to a color problem, in the image you are already using three: red, green, and black. If it's a problem of the area that each color occupies, this is solved by giving greater relevance to white. If the goal is to make the user clearly see what type of action they are performing or what result they obtained with this action, two different states sharing the same graphic is not the best solution.

Alternative solutions:

Give relevance to the icon, for example in negative with the color of the alert, facilitates perception without the need to occupy the entire area with a background of the same color.