Components

Link

Overview

Overview

When to use

A link <a></a> element is used when you want users to:

• Navigate to a different page within the site
• Navigate to an entirely different site
• Jump to an element on the same page
• Link to emails or phone numbers

When not to use

If you are performing an action, like submitting a form, use a button element instead.

Variants

Inline

Inline links are used in sentences or paragraphs of text. The inline link behaves the same as the standalone link but it is styled with an underline.

Neutral color can be used for less important actions. Bold text can be used for emphasis.

Standalone

Standalone links are used on their own or directly after the content. They should not be used within sentences or paragraphs.

They also have a neutral color option. Bold text can be used for emphasis.

The standalone link component can be paired with an icon. Icons should always be the same color as the link text.

Color

Neutral

Call to action

A link can be styled as a button when more prominence is required. Try to use only one per section or screen.

Size

Inline link sizes should match the type size of the text it is inline with. CTA and standalone links have regular and compact size option.

Inline

Standalone

CTAs

Internal vs external links

Internal links point to the currently active website. External links navigate to an entirely different site and should always use the outbound link icon.

Inline

Standalone

CTAs

Accessibility

Keyboard

Links are native a elements with an href: Tab focuses them and Enter follows them. Space does not activate a link; it scrolls the page, as users expect.

Screen readers

A link is announced as "link" followed by its text, and that text is its accessible name. Left and right icons, built-in or custom, are aria-hidden="true" and focusable="false", so they add nothing to the name.

A disabled link is rendered without href and with aria-disabled="true". It is no longer a link: it drops out of the Tab order, and screen readers in reading mode announce it as unavailable text.

Using the example

• Link text must say where the link goes, even when read on its own from a links list. Avoid "Loe edasi" or "Siit" without context (WCAG 2.4.4).
• Use a link for navigation and a button for actions. asButton only changes the styling: the element is still a link and still activates on Enter only.
• If a link opens a new tab or downloads a file, say so in the link text ("Juhend (PDF, 2 MB)"). The template uses target="_self".
• Custom icons passed as customIconLeft or customIconRight must include aria-hidden="true" and focusable="false" themselves.
• Never add an aria-label that differs from the visible text; speech-input users say what they see.
• Prefer hiding a link that does not apply over disabling it. A disabled link cannot be focused, so keyboard users cannot find out why it is unavailable.