Problem

Today we have different patterns for the same problem: how to group actions when there is not enough space to display them as aligned buttons.

We have dropdown button with text, dropdown button with cogwheel icon, dropdown button with caret only, and icons as buttons.

Even the dropdown contents are not always displayed the same. Sometimes with icons, sometimes not.

Solution

Use the cogwheel icon dropdown button each time actions need to be grouped in a small space.

Users page before

Users page after

Destructive actions must be last in the list, written in red and separated by a line

Those destructive actions must be followed by a confirmation pop-up with red button