Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pagination

v.1.0.0 | Saturn
Healthy
StorybookGithubFigma

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

import { Pagination } from '@kubit-ui-web/react-components'
12345
<Pagination
  variant="DEFAULT"
  currentStep={0}
  maxStepsNumber={10}
/>

Variant

In Kubit Design System, users have the freedom to generate variants for each component according to their needs. While predefined variants are provided as examples, they can be modified or new ones can be added to align with the specific requirements of each project.

We have set this predefine style for its quick use, access them through the variant prop:

12345
<Pagination
  variant="DEFAULT"
  currentStep={0}
  maxStepsNumber={10}
/>

Basic component

The minimum required props for its basic use are currentStep and maxStepsNumber. Also, the steps number to show can be added with maxCountersNumber.

For this component the click behavior must be enabled by passing the functionality and change the currentStep. The cursor will still change its appearance when hovering the numbers of the pagination, even if the click function hasn’t been passed defined. This also happens with the paginationLeftButtonControl and paginationRightButonControl props. Check the api section for further information.

123456
<Pagination
  variant="DEFAULT"
  currentStep={0}
  maxStepsNumber={10}
  maxCountersNumber={7}
/>

Customize button controls

Use paginationLeftButtonControl and paginationRightButtonControl props to customize the side controls of the component. For example, these properties allow you to easily change the icons on the buttons.

12345678910
<Pagination
  variant="DEFAULT"
  currentStep={0}
  maxStepsNumber={10}
  paginationLeftButtonControl={{
    icon: 'ICON_CHEVRON_LEFT',
    ariaLabel: 'left button'
  }}
  paginationRightButtonControl={{
    icon: 'ICON_CHEVRON_RIGHT',
Page controlAccessibility
PaginationDesign Specs