Link
Usage
When to Use
Use links to allow users to navigate to different pages. In many cases, links open a new tab in the browser.
Use links for Navigation tabs, for example in the header bar.
When Not to Use
For elements that trigger an action, such as 'submit', 'merge', 'create new' or 'upload', use buttons instead. In contrast to links, buttons usually trigger actions within the same page.
Variants
Underlined Link
Underlined links are very easy to recognize. Use them, if the link should stand out.
Non-Underlined Link
Non-underlined links are mostly used in cluttered interfaces or if links are less important.
Custom Variants
Apart from the previous variants, links can have a different, custom appearance. In general, try to avoid using custom variants. This way, users will develop a better understanding of the link’s functionality (Interaction Design Foundation, Affordances) .
An example for custom links can be found in YouTrack. To indicate issues that are already resolved, links are displayed in grey instead of blue. This works because users expect a link here, regardless of its appearance.
Content
Clearly explain what users will find at the link's destination. Avoid generic labels such as 'click here' or 'show more', especially if the link is not part of a block of text.
Use three words or less if possible. Usually, users only read the first two to three words of a link (NNGroup, First 2 Words: A Signal for Scanning) .
Include links into your text instead of attaching them to the end of the text.
Use the same text for links that navigate to the same URL. If you are unsure how to label a link, check the application you are working on to see if the URL was referenced somewhere else.
Generally, use sentence-style capitalization.
Use title-style capitalization for links in the header bar. This is the only exception to sentence-style capitalization for links.
Layout
Since links are used very differently, there are no universal rules for their spacing and alignment. Refer to the related pattern guidelines if your link is part of a pattern, like a header bar or a data table. Otherwise, refer to the sizing and spacing guidlines.