Links
A link initiates an action.
Guidelines
-
Use links over buttons in the following situations:
- In the main workspace, where too many buttons can clutter a design. Reserve buttons for the most important actions.
- To navigate to another location in the UI.
- When you cannot condense the label of a button to three words or fewer.
- If a link has a matching menu item, use the same text as the menu. Otherwise, you can use more conversational text in the link. A common place for conversational text is on the Getting Started tab, as shown in this example.
- Use sentence-style capitalization. Exception: If the link text includes the name of an object or UI element that includes upper case letters, then use upper case letters in the link.
- End link text in an ellipsis when it opens a wizard or dialog.
- For links with opposite actions, use wording that indicates that the actions are the reverse of one another. For example, Attach and Detach.
- Underline link text when the user hovers the pointer over the text. Underlining provides an additional visual cue that the text is a link.
- Include an icon in a link only if the icon represents an object. Ensure that the behavior that takes place when the user clicks the icon is the same behavior as clicking the link text.