Drop-Down Button vs. Split Button

Andrew Coyle
Oct 14, 2014 · 2 min read
Medium uses a drop-down button to give users a way to pick the collection they want to publish under.

The drop-down button displays a list of items when clicked. It is essentially a two-step process that provides greater specificity to a singular action.

Medium employs this design pattern (shown above) to give the user the ability to publish their article in different collections. When a user clicks the “publish” button a drop-down list appears containing different collections to publish under.

Gmail uses a split button to provide users alternative action items within the same reply button.

A split button is more complex than the drop-down button because it acts as two distinct buttons in one. A split button has a default action followed by a divider line and an arrow. When the arrow is clicked it exposes a drop-down list of alternative actions. This pattern is used when there are many possible actions but only one primary action.

Both design patterns are a great way to reduce visual clutter. However, these patterns do introduce more complexity because of the multiple steps involved. In many circumstances, it may be better to list all options instead of concealing it within a button.