The Pagination component enables the user to select a specific page from a range of pages with previous/next controls, collapsing long ranges with ellipses.

Open in new tab 
import { useState } from "react";
import { Pagination } from "@kesko/components";

export default () => {
  const [page, setPage] = useState(1);

  return <Pagination count={10} page={page} onChange={setPage} />;
};
import { useState } from "react";
import { Pagination } from "@kesko/components";

export default () => {
  const [page, setPage] = useState(10);

  return <Pagination count={20} page={page} siblingCount={2} boundaryCount={2} onChange={setPage} />;
};

Props

NameDescriptionTypeDefault
count

Total number of pages.

number—
siblingCount

Number of always-visible page buttons on each side of the active page.

number1
boundaryCount

Number of always-visible page buttons at the start and end of the range.

number1
itemLabel

Returns the accessible label for a numbered page button as well as next and prev buttons.

(paginationItem: PaginationItem) => string—
prevLabel

Visible label for the previous-page button.

string"Previous"
nextLabel

Visible label for the next-page button.

string"Next"
hidePrev

Hides the previous-page button.

booleanfalse
hideNext

Hides the next-page button.

booleanfalse
page

The currently active page (1-based).

number—
aria-label

Accessible label for the navigation landmark.

string—
href

Returns the href for a page item as well as next and prev buttons, rendering the items as links.

(paginationItem: PaginationItem) => string—

Events

NameDescriptionType
onChange

Called with the newly selected page and the originating click event.

(page: number, e: MouseEvent<ButtonTarget>) => void

CSS custom properties

CSS custom properties provide finer-grained control than props. Prefer the props API when it suits your need.

NameDescriptionDefault
--k-pagination-column-gap

Overrides the horizontal gap between items.

var(--k-space-4xs)
--k-pagination-row-gap

Overrides the vertical gap between the page list and the controls.

var(--k-space-2xs)
--k-pagination-color-ellipsis

Overrides the ellipsis color.

var(--k-color-text-link)