Government of Spain Dintel, Sistema de Diseño Standardized Design of Electronic Procedures Start First steps Foundations Components Modules Templates Tokens Support
Components Pagination

Pagination

Pagination is used to divide content or data into multiple pages, with a control to navigate to the previous or next page. Generally, it is used if there are more than X items displayed in a view and the predetermined number displayed will vary depending on the context.

Preview

Figma
Pagination preview

Uses

When to use

On screens with listings and tables. On screens with more than 10 items shown in a table or listing.

When not to use

If the information is limited.

Behaviour

Indicators and actions

Isualization of the pagination component to display the number of pages and elements
Number of pages and elements
Paging component display to select the number of items per page
Items per page
Display of the paging component
Navigation actions

Responsive

Display of the pagination component for mobile
Mobile

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.

Page numbers are encapsulated in a listing with role=”list”. Page numbers are encapsulated in a listing with role=”list”. Page numbers and arrows have the title property to indicate the meaning of each button.
Funded by the European Union NextGenerationEU, opens in new tab Recovery Plan, Transformation and Resilience, opens in new tab Digital Spain, opens in new tab Support Accessibility Web Map Cookies Policy

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