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.

nextUX

The future of iteration

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store