← Back to Catalog

Button groups

actions.button_groups

Present related actions as a small cluster of buttons, aligned horizontally or vertically; split into more groups if there are more than three or four actions.

Description

Related actions read as one unit when they sit in a small horizontal or vertical cluster rather than scattering across the chrome. Keep each cluster to about three or four buttons; past that, split into further groups so the strip stays scannable. Apply this to peer actions that share a role; do not force a huge tool set into one undifferentiated strip when an action panel or menu is the better home.

When to use

Presenting a few related actions side by side or stacked.

Not when

A large command set needs an action panel or overflow menu.

Agent hint

Cluster related buttons; split past three or four into further groups.

Pass

Related actions sit in one small horizontal or vertical cluster; more than three or four are split into further groups.

Fail

Related actions are scattered, or more than three or four sit in one undifferentiated strip.

Citations

Designing Interfaces 3e ch. Doing Things — Button Groups (Tidwell, Brewer, Valencia)

https://www.oreilly.com/library/view/designing-interfaces-3rd/9781492051954/

Open UX · cited UX rules agents audit against

Privacy · Sources ·