Overview
Links are used as navigational elements to direct the user to other pages. They may appear on their own, within a sentence or paragraph (underlined links), or directly following the content.
When to use
- To make the text inside paragraphs or lists interactable (underlined links).
- To offer action text that’s long.
Anatomy
- Text
Variants & States
Type
There are two main variants for this component. Accent in our usual accent color and a neutral one. In most cases, it is recommended to use the accent one, as it has a clearer and stronger call to action. The neutral link is the better choice for secondary and less important links that lead to additional information.
Style
There are three different styles that our links can make use of. Accent without underline, our default choice, accent link with underline, which is best suited for making links stand out more in longer paragraphs, and a neutral style. The color of the underline should always match the color of the text.
Neutral links should only be used with an underline, as without one the user will have a hard time recognizing the link as a clickable element.
Size
The size of link used depends on its context. In most cases the link should use the same size as the text surrounding it, if in a paragraph. For standalone links md size is usually a safe choice. It is not recommended to have important links embedded in xs text, as these will be harder to interact with on mobile devices.
States
The link component has four main states: default, hover, active and disabled. The states are named after their css pseudo-class.
The default state is the normal state of the link. Hover is activated when the user interacts with an element with a pointing device but does not necessarily activate it. The active state represents a button that is being activated by the user by clicking on it. The focus state is globally defined, no special adjustment is made on this component. Disabled is if the button can’t be activated (clicked on) or accept focus.
Internationalization
For RTL (right-to-left) languages, there are no custom adjustments made.
Writing Guidelines
Forget the vague. Show respect to the user by stating clearly where the link is taking them. You can substitute your lazy “here” and “learn more” with pointing at the actual destination name or what’s there to learn about:
If the link is included as a part of the sentence, treat it like an actual word or phrase, meaning you would prefer normal case to random capitalization and use typical punctuation.
If the link ends the sentence, make sure the period is not underlined and/or accentuated with color of the actual link.
If the link is in the shape of a button, the button guidelines apply. In short, make it concise and CTA-like.
Not-a-fun fact:
From the legal perspective, the rules are the opposite. Legal would prefer having the title case for the link names — to match the name of the document in the link. A lot of words get capitalized in legal documents, and the mismatch in the link imposes a risk of class action. Users may file a complaint of the link being misleading if its name doesn’t have the same capitalization as in the doc, meaning they may not know it’s the same thing. Moreover, legal would prefer “here” and “learn more” instead.
To avoid risks, we agreed to use the title case for the two most important legal documents Terms of Service and Privacy Policy — even though they’re general nouns and they shouldn’t be capitalized. But in this particular case we treat them as documents’ names that are capitalized in the origins docs.
For other documents we can have the freedom of using the name of the document in normal case to match our aesthtics. But if you work with a document like policies and terms it’s always a good idea to run it with legal just in case.
Properties
| Name | Type | Values | Description |
|---|---|---|---|
| variant | String | accentneutral |
|
| underline | Boolean | truefalse |
|
| disabled | Boolean | truefalse |
|
| text | String | "" |
Usage Guidelines
Content Guidelines
We use links to easily transfer the user between different information sources. Links usually lead the user out of our app, but could also transfer them from one part of the app to another. Both behaviors should be obvious from the text and visual cues.
Voice and tone
- Neutral and helpful
- Clearly communicating the destination website
Copy
- We avoid the obscure “Click here” and “Learn more” as much as possible.
- For both web and apps, Terms of Service and Privacy Policy should be capitalized.
- There’s usually no punctuation after a link.
Accessibility
- Include alt texts with additional information about the nature of the link if the title of the section or the main action for the link is further away in terms of context.
- Announce external links as such: Link. [Label].
- If the link is in the middle of a sentence, usually, the whole paragraph is interactive. In those cases, “link” should still be announced just before the interactive part so the user knows exactly where it’s leading.