@gemeente-denhaag/pagination NPM

Pagination

Pagination is used for splitting up content or data into several pages, with a control for navigating to the next or previous page.

When to use

Generally, pagination is used if there are more than 25 items displayed in one view.

Alternatives and related components

Anatomy

The pagination consists of:

Page: shows the number of pages
Arrow: allows you to go to the previous or next page

(Interactive) states

The pagination contains the states inactive, active, hover and focus.

Design properties

Page: TheSans/md/400

Inactive page: text color Grey/4
Active page: text color white, background-color Green/3
Arrow: svg color Grey/4

Hover inactive: page text color Green/3
Hover active: page text color white, background-color Green/3
Disabled inactive: page text color Grey/2
Disabled active: page text color white, background-color Grey/2
Focus: border color Ocher/5

Page: height and width 32px
Arrow: height and width 20px
Arrow-left: padding-right 10px
Arrow-right: padding-left 10px

Accessibility

technical requirements

Content guidelines

Pagination alignment

The pagination can be left, right and center aligned based on the parent. The alignment depends on the layout of the rest of elements.

Best practices

Paginations should:

Only be used for lists with more than 25 items
Clearly identify which page the user is on by displaying the current page number
Be placed at the bottom of a long list that has been split up into pages
Navigate to the previous and next set of items in the paged list
Hint when users are at the first or the last page by disabling the corresponding button
Always show the first and last page
Replace infinite scrolling on very long pages

Paginations should:

Not show more than 5 pages next to each other. Instead, use the dots and show on the right the last page

Only use dots if there are more than 5 pages.

If there are many pages and the user is on one of the first three pages, show these pages followed by the dots and then show the last page.
If there are many pages and the user is on one of the last three pages, show the first page followed by the dots and then show the last 4 pages.
If there are many pages, always show the active page in the middle and show the first and last page next to the dots.

References

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

8 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

11 months ago

11 months ago

12 months ago

12 months ago

Pagination

When to use

Alternatives and related components

Anatomy

(Interactive) states

Design properties

Typography

Color

Interactive states

Structure

Accessibility

Content guidelines

Pagination alignment

Best practices

Dos

Don’ts

Logic

References