Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pagination

v.1.0.0 | Saturn
Healthy
StorybookFigma

Is used to select a specific page from a given range of pages.

Components

Play with the component with our playground.

[CODE]

Anatomy

Foo

NameDescription

1

Current page
Required
Indicates the current page.

2

Default page
Required
Indicates all the other pages that are not the current one.

3

First/Last page
Indicates the first and the last page when there are more than 5 pages. If you are not in the first or last 5 pages, it must be separated with an ellipsis and always visible.

4

Handle
Required
Indicates if you can navigate to the next or previous element.

5

Ellipsis
Use this element to separate the first and last page when there are more than 5 pages.

States

  • Number variants
Active default

  • A color square indicates the current page.

    • Inactive default

  • Indicates all the non selected pages. All this pages are actionable.

    • Chevron variants
    Active arrow

  • A color chevron indicates is clickable to move to forward the next element or go back to the previus

    • Disabled row

  • A color chevron indicates is not clickable. When the user is on the first page, the left chevron will be disabled.

    • Options

    Desktop

    • 2 to 5 pages

    All numbers can change to current page.

    Foo

    • More than 5 pages

    When there are more pages, we will show just 5 and the variant with ellipsis will appear. If the selection is on the first 4 numbers, the last number will be shown after a ellipsis.

    Foo

    Mobile

    • 2 to 4 pages

    All numbers can change to current page. On mobile the maximum number of pages will be 4.

    Foo

    • More than 4 pages

    When there are more pages, we will show just 4 and the variant with ellipsis will appear. If the selection is on the first 3 numbers, the last number will be shown after a ellipsis.

    Foo

    Layout

    • Vertical grouping

    The page controller must respect a margin of 16px with the pager element.

    Foo

    Foo

    Behaviour

    Desktop and tablet

    Less than 5 pages

  • All the numbers will be actionable. The current page will be marked in a square.

    • Starting pages

  • The first page will always have the back arrow disabled. If there are more than 4 pages, the last one must be visible and separated by ellipsis at the end.

    • Middle pages

  • When there are more than 4 pages, there must always be a group of 2 in the middle of ellipsis. The selected page will be the one in the left of the 2 central numbers.

    • Ending pages

  • The last page will always have the right arrow disabled. If there are more than 4 pages, the first one must be visible and separated by ellipsis at the beginning.

    • Clickable area

    • Clickable elements

    All the elements of this component are clickable, excepting the ellipsis. The navigation arrows will change pages one by one. Clicking on a number will automatically navigate to the page selected. The interactable area is 24x24 px.

    Foo

    Keyboard interactions

    • Tap the arrow key on the keyboard

    This pagination is controlled by using arrow keys to move it.

    Foo

    • Keyboard focus

    All the elements of this component are keyboard interactable, excepting the ellipsis.

    Foo

    Do's and dont's

    Foo

    Do’s

    Use the disabled navigation arrows if you are on the first or last page.

    Foo

    Don’t

    Use the ellipsis if there are more than 5 pages on desktop or 4 on mobile.

    Foo

    Do’s

    Don’t use more than 5 pages on desktop or 4 pages on mobile.

    Foo

    Don’t

    Use the disabled navigation arrows if you are on the first or last page.

    Foo

    Do’s

    On desktop resolutions, the current page must always be on the center of the 3 pages between ellipsis.

    Foo

    Do’s

    On mobile resolutions, the current page must always be the left one of the pages between ellipsis.

    PaginationUsage
    PaginationCode API