When users need to make a selection and then an immediate related choice, use the combo link. This less prominent version of the combo button is the right fit for busy layouts. The left link is the default action (the most commonly used one) and the chevron on the right opens a menu with available related actions.
When to use combo links
In action-dense screens, we use the combo link to help users initiate an action and then make the secondary or tertiary choice they need to make next. The screens already feature primary and secondary calls to action. When the additional action is needed, we use the combo link to display it.
Standard combo link
Appearance and behavior
The combo link uses the same interaction as the split button. The function is split in two.
- The link on the left lets users take the primary (or most commonly used) action.
- The caret on the right lets users make additional choices related to the primary action on the left.
The interaction for the link follows the link pattern. The interaction for the caret is related to the split button.
Content guidelines for combo links
- 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. For example: Preview payroll and Save for later.
- Set link 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.
- Be concise in link labels and additional choices.
- Never use “Click here.” If instruction text is needed, use “select” followed by a clear directive.
• Link and button colors
• Consistent with button hierarchy
• Font specs: font face, font size, font weight, capitalization
• Corner radius
• Tap target size
• States: disabled, default, hover, active, focused
• Basic text commands
• Button copy
• Menu items
When to use
• There are multiple buttons or combo buttons placed on a single page.
• The combo link is not the primary call-to-action the user should focus on.
• There is unnecessary visual cognitive load (for instance, multiple buttons in a table, multiple options in a section, in the activity feed–since there are multiple actions within an item.)
• Position and label need to be consistent with other instances.
Place multiple combo links close to each other.