CSSN'T Components

Design system

Pagination

Navigate through paged datasets or lists.

Pagination Examples

Copy-ready examples with live previews.

Basic usage

Controlled pagination (currentPage + onPageClick), with optional jump buttons and dots separator.

Live preview

more_horiz
currentPage: 1

Basic

import { useState } from "react";
import Pagination from "@/packages/ui/src/_components/pagination/Pagination";

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

  return (
    <Pagination
      numberOfPages={10}
      currentPage={page}
      onPageClick={(next) => setPage(Number(next))}
      showJump
      showBigJump
      showDots
    />
  );
}

Styling (variant / outline / variantRadio)

Pagination forwards Button styling props into each page/jump Button.

Live preview

variant="tertiary" + outline + variantRadio="pill"
more_horiz
currentPage: 6
variant="warning" + variantRadio="square"
more_horiz
currentPage: 1

Styling

import { useState } from "react";
import Pagination from "@/packages/ui/src/_components/pagination/Pagination";

export default function Example() {
  const [page, setPage] = useState(6);

  return (
    <Pagination
      numberOfPages={11}
      variant="tertiary"
      outline
      variantRadio="pill"
      showJump
      showBigJump
      showDots
      currentPage={page}
      onPageClick={(p) => setPage(Number(p))}
    />
  );
}

Sizes

Use Button size presets to fit different density needs.

Live preview

size="small"
currentPage: 3
size="medium"
currentPage: 3
size="large"
currentPage: 3

Sizes

import Pagination from "@/_components/pagination/Pagination";

export default function Example() {
  return (
    <>
      <Pagination numberOfPages={7} size="small" />
      <Pagination numberOfPages={7} size="medium" />
      <Pagination numberOfPages={7} size="large" />
    </>
  );
}

Large ranges

When showDots is enabled, the component renders a dots separator between two page groups.

Live preview

Large range (numberOfPages=25) + showDots
more_horiz
currentPage: 13

Large range

import { useState } from "react";
import Pagination from "@/packages/ui/src/_components/pagination/Pagination";

export default function Example() {
  const [page, setPage] = useState(13);

  return (
    <Pagination
      numberOfPages={25}
      showJump
      showBigJump
      showDots
      currentPage={page}
      onPageClick={(p) => setPage(Number(p))}
    />
  );
}

Minimal

Render only page numbers (no jump / bigJump / dots).

Live preview

Minimal (numbers only)
currentPage: 1

Minimal

import Pagination from "@/packages/ui/src/_components/pagination/Pagination";

export default function Example() {
  return <Pagination numberOfPages={5} />;
}

Interactive playground

Quick way to validate combinations (pages / variant / size / radius / outline / jumps / dots).

Live preview

numberOfPages
variant
size
variantRadio
flags
currentPage: 6
more_horiz

Playground

import { useState } from "react";
import Pagination from "@/packages/ui/src/_components/pagination/Pagination";

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

  return (
    <Pagination
      numberOfPages={12}
      currentPage={page}
      onPageClick={(p) => setPage(Number(p))}
      variant="primary"
      size="small"
      variantRadio="sm"
      outline
      showJump
      showBigJump
      showDots
    />
  );
}

On this page

Pagination Props

Page navigation component that renders a row of page Buttons, with optional jump controls (first/prev/next/last) and an optional dots separator.

Pagination is stateless for selection: keep the active page in your own state and update it from `onPageClick`.

For best UX with jump controls, pass `currentPage` when `showJump=true` so prev/next can be computed correctly.

Styling props (`variant`, `size`, `variantRadio`, `outline`) are forwarded into the internal Buttons for consistent theming.

Pagination props
PropTypeRequiredDefaultDescription
numberOfPagesnumberYesn/aTotal number of pages (renders buttons from 1 to numberOfPages).
currentPagenumberNo1Current selected page (used to compute prev/next when showJump is enabled). Keep it controlled in the parent.
onPageClick(page: number) => voidNon/aCalled when a page number or a jump control is clicked. The argument is the page that should become active.
showJumpbooleanNofalseShows Prev and Next controls.
showBigJumpbooleanNofalseShows First and Last controls.
showDotsbooleanNofalseShows a dots separator between the two page groups.
variant"primary" | "secondary" | "tertiary" | "success" | "warning" | "danger" | "info" | "transparent"No"transparent"Visual variant forwarded into each internal Button (page numbers + jump controls). (Values: primary, secondary, tertiary, success, warning, danger, info, transparent)
size"small" | "medium" | "large"No"small"Button size preset forwarded into each internal Button. (Values: small, medium, large)
variantRadio"none" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | "square" | "rounded" | "pill"No"sm"Button radius/shape preset forwarded into each internal Button. (Values: none, xs, sm, md, lg, xl, full, square, rounded, pill)
outlinebooleanNofalseOutline style forwarded into each internal Button.