Link

Components

Link

Element of navigation. They may appear alone, within a sentence or paragraph, or directly after the content.

Preview

Figma

Uses

When to use

When we navigate to a different page.

When not to use

When too many links will clutter a page and make it difficult for users to identify their next steps.

When the click triggers an action and not a navigation to a different page, the button component should be used.

Behaviour

Sizes

Visualization of the link component with size M

Visualization of the link component with size L

Types of selection

Text

Icon + Text

Text + Icon

States

Default

Hover

Focus

Pressed

Disabled

Accessibility

This component has been validated to meet the accessibility requirements of UNE-EN 301549:2022, which includes the criteria of WCAG 2.1 (AA), however, changes in content and styles can affect accessibility compliance. We must make sure to review and follow the guidelines in this section when you update or add new content or style to this component.

The element containing the link text has role="link".

E link has the title text editable property, which allows you to add a readable text to the screen reader, specifying where this link will take you and whether or not to open a new window.