Government of Spain Dintel Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support

Link Back

This component is used to help users to the previous page or section.

The back link button is usually represented by an arrow to the left or by the word "Back", and is commonly found in the navigation bar, at the top or side of the screen.

Preview

Figma
Preview link back

Uses

When to use

The user has accessed a page through a link or a specific action, and is expected to want to return to the previous page. The navigation between the different pages or sections of the application or website is linear and logical, and the user can expect to be able to return to the previous page easily. The user has performed an action on a page and is asked if he wishes to undo or confirm it before returning to the previous page.

When not to use

The user has accessed a page through a non-linear or non-intuitive process. The user has performed an action on a page and the action cannot be undone or confirmed before returning to the previous page.

Behaviour

By clicking on a backlink button in a mobile or desktop application, the user is redirected to the front screen within the application. This can be the screen from which the current screen was accessed, or a screen previously visited in a specific workflow.

In some apps or websites, a back link button can take the user one step ahead in a specific process, such as purchasing a product or creating an account.

In general, it is important to provide the user with an intuitive way to navigate through the application or website, either through the use of back link buttons or through other navigation tools, and consider the user's context of use and actions before redirecting the user.

By clicking on a backlink button in a mobile or desktop application, the user is redirected to the front screen within the application. This can be the screen from which the current screen was accessed, or a screen previously visited in a specific workflow.

In some apps or websites, a back link button can take the user one step ahead in a specific process, such as purchasing a product or creating an account.

In general, it is important to provide the user with an intuitive way to navigate through the application or website, either through the use of back link buttons or through other navigation tools, and consider the user's context of use and actions before redirecting the user.

When clicking

Sizes

Viewing the link component back to size S
S
Viewing the link component back to size M
M

States

Display of the link component back in active state
Active
Viewing the link component back in hover state
Hover
Viewing the link component back in focus state
Focus
Display of the link component back in the pressed state
Pressed
Viewing the link component back in disabled state
Disabled

Accessibility

This component has been validated to comply with 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 compliance with accessibility. 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.