Link
Text-based navigation elements that take users to another destination.
Links are text-based navigational elements that take users to another destination. They may appear as standalone elements or inline with text. Links are commonly used in menus, navigation components, panels, and resources like FAQs.
Also known as: Hyperlink, anchor link.
Anatomy
A. Leading icon (optional): Icon located before the link text used to enhance the meaning of the link.
B. Destination label (required): Text indicating where the link will take the user.
C. Trailing icon (optional): Icon located after link to indicate the meaning of the text.
D. Underline (optional): Line under link text to enhance and indicate a link is present.
Usage
| Component | When to use | When not to use |
|---|---|---|
| Standalone | For links that appear outside of sentences or paragraphs. | To prompt an action or event. Use a Button instead. |
| Inline | For links that appear within sentences or paragraphs. | To prompt an action or event. Use a Button instead. In native mobile applications. |
Best practices
- Only use links as navigation elements, not for actions. Use a Button to perform actions.
- Use consistent styling for all links across your experience to ensure users recognize them.
- Ensure icons and link text are the same color.
- Ensure users can select a link anywhere on the link text or associated icon.
- Always use an icon to indicate if a link opens in a new tab. Reference VGAR INT-5 for more information.
- Ensure the visible link text closely matches the name of the resource being linked to.
- Ensure links are clearly identifiable by pairing text color with an icon or underline. This does not apply to navigation components like horizontal or vertical navigation, anchor link menus, and footers, where text color alone suffices.
Do Combine at least one visual cue, such as an underline or icon, with text color to communicate the presence of a link.
Don't Implement links with only text color as a visual cue to communicate the presence of a link.
Standalone links
Standalone links are interactive elements placed outside of body text. They’re often used in menus, footers, and sidebars for quick access to frequently used features within the site or application, or in resource lists to provide access to external sites.
Do Use leading icons to help users quickly identify links.
Don't Use uncommon or vague icons.
Do Pair standalone links with leading or trailing icons.
Don't Use leading and trailing icons together.
Inline links
Inline links are interactive elements embedded within body text. Inline links are commonly used to provide direct access to additional information or resources without disrupting the flow of the content.
- Limit the number of inline links within a paragraph to avoid overwhelming users.
- Ensure inline links are relevant to the surrounding content.
Do Use trailing icons to clarify the outcome of an inline link.
Don't Use leading icons with inline links.
External links
Users should be aware of, and have control over, whether they are leaving their current website. To ensure users have choice, make sure to indicate when a link leads to an external website.
Generally, there are two methods to inform users that links lead to external sites.
Maximize icon
The most common method is pairing a maximize icon with links to external sites.
- For standalone links without supporting content, use a maximize icon to indicate the link leads to a new website.
- Use the “maximize-link” icon to ensure the line height of the link text is aligned with the icon.
No icon
In some scenarios, the link label and surrounding content will provide enough context.
- For standalone links, use labels with the name of the destination when omitting the maximize icon.
- For inline links, use surrounding content to indicate the link destination without disrupting the flow of content.
New window or tab
Generally, avoid opening new windows or tabs. Instead, open links in the current window to avoid disorienting users and causing accessibility problems. Only open a new tab or window when directing users to information that will help them complete a task.
- Always use an icon to indicate when a link opens in a new window or tab. This is especially important for assistive technology users, as new tabs can be disruptive or disorienting. For more information, reference VGAR INT-5.
”Back to” links
A “Back to” link can be used as an extra navigation element to take users back one level in the site hierarchy. “Back to” links are generally paired with a backwards-facing arrow.
- Always indicate where the “back to” link will take users.
Do Place the “Back to” link in the top left portion of the interface.
Don't Use a “Back to” link on interfaces that use Breadcrumbs.
Behaviors
Styling and coding buttons and links
In general, buttons should be used for in-page actions and links should be used as navigational tools, like leaving a page. Whenever possible, match the visual styling of these elements with their coded and user-expected behavior. However, buttons and links may be styled like one another in some cases. Learn about these exceptions below.
Button coded as links
Buttons may be coded as links but styled as buttons when necessary. For example, an icon button may be appropriate when linking to a shopping cart.
Use the arrow icon whenever possible as a visual cue that selecting will navigate to another page.
Link coded as buttons
Links may be coded as buttons but styled as links when necessary. For example, buttons may be styled as links when information will be presented in an overlay or dialog.
Avoid underlining links coded as buttons, as this style is reserved for links, not buttons.
Content
- Use simple language—avoid abbreviations or jargon.
- Avoid verbs that focus on senses to include all users. For example, use “Visit cart,” instead of “View cart”.
- Use at least two but no more than five words in link labels, unless linking the name of a resource or publication.
- Avoid using articles such as “a,” “an,” or “the”.
- Avoid using “click here,” or “here” as link text.
- Don’t include “link” in link text.
Link formulas
- Combine action or command verbs with nouns to make labels specific.
- [verb] + [noun] is useful for most product cases.
- [verb] + [adverb] is typically used for marketing and promotions.
- Only use single word labels for common navigational actions such as “Home,” “Profile,” or “Settings”.
Do Use labels that describe the link destination.
Don't Use general or vague labels.
Do Use “Learn more” when content before the link clearly indicates what additional information will be found.
Don't Use “Learn more” when the destination of the link or information it provides is not clear.
Do Customize link labels when using more than one per screen.
Don't Use multiple “Learn more” labels on one screen.
Do Punctuate inline links when it’s grammatically necessary.
Don't Punctuate standalone links.
Standalone links
- Use sentence case except for acronyms or proper nouns, such as resource titles.
Do Use the verb + noun formula to make labels descriptive.
Don't Link entire sentences.
Inline links
- Follow the capitalization structure of text surrounding inline links. Only capitalize proper nouns, acronyms, or titles.
Do Use phrasing to embed links naturally in your sentence.
Don't Combine points of view in sentences with inline links.
Do Use title case for links to resources or publications.
Don't Use title case for text surrounding inline links.
Platform considerations
Mobile
Avoid using inline links in native mobile apps, as they can be difficult to select on small screens. If your use case requires inline links in a native mobile app, ensure you implement sufficient touch targets.
