Button go up

Components

Button go up

The backtop is a button that allows you to return to the top of the page in an agile way.

Preview

Figma

Uses

When to use

When the content of the page is very extensive (approximately four screens).

When you need to return to the top of the page frequently to view the contents.

We place the backtop button at the bottom right of the page, as this is where users expect to see it.

When not to use

When the page is relatively short, the backtop button is left over, since the user can scroll effortlessly, and we do not clutter up the interface.

We do not place the button in another area of the screen, in those cases it is usually ignored

We don’t put multiple backtops on one page. Users ignore them and they are very repetitive.

Behaviour

The backtop component appears when the content of a page is extensive. It appears when users scroll down, that is, when it is most likely to be needed, without getting in the content of the page and under the user’s control.

Properties and variables

Active

Hover

Focus

Pressed

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.