When to use
Use a regular link for navigation between pages of the same window.
This option is in the Settings dialog. “Configure servers” opens another page of the same dialog. Do not use a button to navigate to another page of the same window.
Use an external link for navigation to web resources. See below for the external link icon.
Use a regular or drop-down link for secondary actions in packed or small UI areas. The “Reset” action is a link for two reasons: (1) The action appears only when the default value in the field is changed and reverting to a default is considered a rare scenario. (2) A lightweight link fits better than a button in this busy layout.
The “Modify options” drop-down link fits into the top right corner of a busy layout.
How to use
Use sentence capitalization.
Add an ellipsis to a button-link if it opens another UI area where input is possible. See examples for the Button.
Do not use words like “navigate” or “click here”. A link already implies navigation or clicking.
When possible, replace “Learn more” and other generic phrases with more informative ones.
Link as a part of text
Make a link the minimum phrase that is enough to understand what will happen without reading the whole text.
Link in a tree or table
Use a link as a secondary action for some items of a tree or table.
If an action is needed for all items of a tree or table:
- Add an icon button to a toolbar.
- For a list of choices, add a separate table column of drop-down cells (see Table).
- If a link in every tree or table line has meaningful formatting, leave it: Links in the “Push Commits” window have the format that helps understand the relation between them: “[remote repository] : [branch]”. Moving these links elsewhere would break this meaning.
External link icon
Always add the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context.
An exception is a help topic link in empty states. The help icon already hints that this is an external help resource so the arrow icon is unnecessary.
Lay out button-links as buttons and dropdown-links as combo boxes. See Layout.
A focused link is activated from the keyboard with Space.