When users need to make a selection and then an immediate related choice, we can use the combo button. A combo button is actually composed of two buttons: the left one is the default option (the most commonly used selection), and the right one (the arrow) shows the available related options.

Usage

We use the combo button to help users initiate an action and then make the related secondary or tertiary choice they need to make next.

With a combo button, users have a choice of multiple actions (2 or more) and one of those choices is the primary action. Example: For an invoice, the primary action is “Save,” and the related actions might be “Save and close” and “Save and create new.”

Appearance and behavior

The combo button is composed of two side-by-side buttons.

  1. The left button is the default action (the most commonly used one).
  2. The arrow on the right opens a menu with other related actions.

In the standard interaction, the primary action always remains the same, regardless of what the user selects, and it does not appear again in the list.

In a variation on that standard, the action that the user selected last is remembered and populated as the primary one. Use this variation where it makes sense (for example, when users are likely to choose the action that was last clicked).

Types of combo buttons

Primary combo button

Secondary combo button

Primary combo button

Light background

Disabled / Default / Hover, Active / Focus / Expanded/ Expanded hover

Dark background

Disabled / Default / Hover, Active / Focus / Expanded/ Expanded hover

Secondary combo button

Light background

Disabled / Default / Hover, Active / Focus / Expanded/ Expanded hover

Dark background

Disabled / Default / Hover, Active / Focus / Expanded/ Expanded hover

Mobile

Combo buttons don’t exist on mobile devices because of the need for clear tap targets. In these cases, we recommend using a menu button with a more generic label.

Content guidelines for combo buttons

  • Be concise.
  • When possible, use verb-noun combinations, like Create invoice.
  • If the related options supplement the default option, you can use a verb to start the default option and nouns for the related options. For example: “Create new” / “Bill,” “Expense,” and “Check.”
  • If the related options are parallel to the default action, you can use verbs to start both the default option and the related options. Examples: Preview payroll and Save for later.
  • Set labels in sentence case. Examples: Create invoice, Send reminder
  • Use title case for proper nouns. Examples: Bank of America, Brad Smith
  • Don’t use end punctuation.
  • Never write “click here.” If instruction text is needed, the correct verb to use is “select.”
  • Recommended voice and tone attributes: straightforward, encouraging

Menu up or down

The default state is for the menu to open downward. In case the button is close to the bottom of the screen the menu will open upward. In this case the arrow in the right part of the button needs to point upward.

Launch Preview
x
px wide

Fixed

  • Min width (100 pix)
  • Button colors
  • Button hierarchy should be consistent
  • Button positioning
  • Font specs: font face, font size, font weight, capitalization
  • Corner radius
  • Tap target size
  • States: disabled, default, hover, active, focused
  • Basic text commands

Flexible

  • Label content (see content guidelines)
  • Button location, not relative to primary/secondary
  • Absolute width
  • Alignment relative to page

Do

  • Use buttons to speed up workflows.
  • Make sure similar buttons in different locations show up in the same position and same order.
  • Make sure copy is simple, clear, and brief.

Don't

  • Place several combo buttons next to each other.
  • Place a combination of combo and primary action buttons next to each other.
  • Was this Helpful?
  •