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.
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.
You can see how this works in some of the examples on this page. The screens already feature primary and secondary calls to action. When the additional action is needed, we use the combo link to display it.
The combo link consists of two elements:
- A regular text link
- A chevron that allows users to open a menu for additional choices
The specifications are related to the common text link and the dropdown menu from the combo button:
- The link uses Avenir Next LT Pro Demi 14 pt.
- The menu items use Avenir Next LT Pro Regular 14 pt.
- The box as well as each line in the menu is 32 px tall.
Standard combo link
Appearance and behavior
The combo link uses the same interaction as the combo button The function is split in two.
- The link on the left lets users take the primary (or most commonly used) action. On hover, focus, click, or tap, the link is underlined.
- The carrot 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 carrot is related to the combo button.
The interaction stages for the carrot are as follows.
- Link hover
- Expanded hover
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 write “click here.” If instruction text is needed, the correct verb to use is “select.”
- Recommended voice and tone attributes: straightforward, encouraging
More combo link examples
We often use combo links in the product for in-line actions.
• 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.