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
Backtop Button
Backtop button
The backtop is a button that allows you to return to the top of the page in an agile way.
Uses
How to use
When the content of the page is very large (approx. 4 screens).
When you need to go back to the top of the page frequently to see the contents.
We place the backtop button at the bottom right of the page, as this is where users expect to see it.
How not to use
When the page is relatively short, the backtop button is superfluous, as the user can scroll effortlessly, and we do not clutter the interface. We do not place the button in another area of the screen, in such cases it is usually ignored.
We do not place the button in another area of the screen, in such cases it is usually ignored.
We don't put several backtops on a page. Users ignore them and they become too repetitive.
Behaviour
The backtop component appears when the content of a page is extensive. It appears when users scroll down, i.e. when it is most likely to be needed, without getting in the way of the page content and under the user's control.
Properties and variables
Active
Hover
Focus
Pressed
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.
