Link

Link is a control that links to another web page or element. Links can be internal or external. It is one of the "quietest" control in the visual loudness scale guide.

Default link is an accent control that links to another web page.

Custom link is a link the functionality and visual appearance of which may differ from the default one. For example, these are clickable link-numbers that are not underlined by hover and may have a different color from our palette in accordance with the chart that they present. When creating a custom link, use the rules for default links as basic rules. Don't use too many custom links in your interface.

You can add addons before and after the link text. Addons have 4px margin from the link text.

• The icon shall match the meaning of the action that will be performed after clicking the link.
• In some cases, if a click on a link with an icon causes a time consuming process, you can change the icon to Spin.

Default link can be used on a colored background of the Notice.

Link sizes should be generous. Large link sizes make it easier for users with low coordination or on mobile devices to activate links. Link size consideration is most important for links that are not contained within blocks or paragraphs of text, such as call to action links. Links should be at least 44px wide and 22px tall.

Links should not be too large on mobile. Very large links that take up much of the viewport can be accidentally activated, such as when a user touches the screen to scroll up or down.

Yale University article about the accessible links

If clicking on a link takes the user away from the page or opens a modal window, then it should be clear from the name of the link what kind of page / modal window it will be. Use an infinitive ("What should be done?") for the link name.

The name of the link should not be very short as it will be difficult to click on it. If the link is still very short, increase its click area.

Always add quotation marks inside the link.

If the sentence ends with email, URL, domain, which is a link, then do not put a period at the end of the sentence – users often copy the address and may accidentally capture the period as well.

Do not add punctuation marks to the link text. The only exception is where the entire sentence is a link.

In the lists, we recommend making the entire line a link – this way there is less noise and it is easier to click on it.

If the link spans two lines, the cursor should not change in the interline area to default. To do this, use display: block.

If you want to place links in one line, the margin between them must be a multiple of 4px:

• 12px – if there is very little space
• 20px – if there is enough space

Find detailed information on the hint link in the Typography guide.

• If there is very little space in the interface, you can use a link instead of button in the table. If there is enough space in the table, use tertiary buttons.
• Use 14px links in table rows. If the link is an URL with a link to an external page, then be sure to put the LinkExternal icon with M size and --icon-secondary-neutral color next to it. It should always have margin-left: var(--spacing-1x).

External links always open in a new tab.

• To indicate the transition to an external resource, use LinkExternal icon with M size and --icon-secondary-neutral token as color.
• Icon should always have margin-left: var(--spacing-1x).
• When hovering over the icon it shall change color to --icon-secondary-neutral-hover-active.
• If for some reason you need to highlight the external resource icon, use link styles for it.

Don't use link component for the text that doesn't lead to another page or perform an action. Do not mislead users.