Government of Spain Logo DINTEL Design System Logo Standardized Design of Electronic Procedures Home First steps First steps What is DINTEL? Designers Developers Resources Frequently Asked Questions Foundations Foundations Color Typography Box shadow Spacing Grid Border Border radius Iconography Illustrations Animations Accessibility Design tokens Writing guidelines Data visualization Interface elements Interface elements Modules Templates Components Updates Contact
Interface elements Components Back Link

Back Link

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

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

Preview

Preview of back link component

Uses

How to use

The user has accessed a page via a link or a specific action, and it is expected that they may want to return to the previous page. 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 whether to undo or confirm it before returning to the previous page.

How 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

When clicking on a back link button in a mobile or desktop application, the user is redirected to the previous 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 applications or websites, a back link button may take the user to a previous step 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 other navigation tools, and to consider the context of use and the user's actions before redirecting the user.

Sizes

Visualization of component back link to size S

S

Visualization of component back link to size M

M

States

Visualization of component back link to active state

Active

Visualization of component back link to hover state

Hover

Visualization of component back link to focus state

Focus

Visualization of component back link to pressed state

Pressed

Visualization of component back link to disabled state

Disabled

Accessibility

This component has been validated to comply with the accessibility requirements of UNE-EN 301549:2022 which encompasses the criteria of WCAG 2.1 (AA), however, changes to content and styles may affect accessibility compliance. Be sure to review and follow the guidelines in this section when updating or adding new content or styling to this component.

This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.

 NextGenerationEU European Union Funding Logo Transformation and Resiliency Recovery Plan Logo Spain digital logo Legal notice Accessibility Cookies policy Contact Sitemap