Pagination

Pagination provides an enterprise-grade control for navigating large datasets (students, sessions, audit logs, reports). It supports compact layouts, separated styling, strong focus-visible behavior, and token-driven theming.

Default Pagination

Full pagination with numbers + ellipsis. Includes previous/next and optional first/last controls.

Show code

import { Pagination } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <Pagination
      totalPages={24}
      defaultPage={7}
      tone="primary"
      variant="group"
      layout="full"
      align="end"
      showPrevNext
      showFirstLast
      siblingCount={1}
      boundaryCount={1}
    />
  );
}

Disabled and Active States

Active page is highlighted. Previous/Next auto-disable at edges. Entire control can be disabled.

Show code

import { Pagination } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <>
      <Pagination totalPages={12} defaultPage={1} showPrevNext tone="neutral" />
      <Pagination totalPages={12} defaultPage={6} disabled tone="neutral" />
    </>
  );
}

Sizing

Control density with sm/md/lg. Useful across dashboards vs. admin tables.

Show code

import { Pagination } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <div className="stack-sm">
      <Pagination totalPages={10} defaultPage={3} size="sm" />
      <Pagination totalPages={10} defaultPage={3} size="md" />
      <Pagination totalPages={10} defaultPage={3} size="lg" />
    </div>
  );
}

Alignments

Align within a full-width container (start/center/end). Ideal in table footers and dashboards.

Show code

import { Pagination } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <div className="stack-sm">
      <Pagination totalPages={16} defaultPage={6} align="start" />
      <Pagination totalPages={16} defaultPage={6} align="center" />
      <Pagination totalPages={16} defaultPage={6} align="end" />
    </div>
  );
}

Custom Separated Pagination

Premium separated style: each item is an individual pill/card with spacing.

Show code

import { Pagination } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <Pagination
      totalPages={18}
      defaultPage={9}
      variant="separated"
      tone="primary"
      showFirstLast
      showPrevNext
    />
  );
}

Simple and Compact Layouts

Simple = prev/next only. Compact = prev + page status + next. Both are enterprise-friendly for tight spaces.

Show code

import { Pagination } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <div className="stack-sm">
      <Pagination totalPages={40} defaultPage={10} layout="simple" />
      <Pagination totalPages={40} defaultPage={10} layout="compact" />
    </div>
  );
}

Pagination With Results Meta

Common table footer pattern: left side shows range, right side shows pagination aligned end.

Showing 61–70 of 248

Show code

import { Pagination, PaginationMeta } from "@/design-system/components/Pagination";

export function Example() {
  return (
    <div className="pagination-toolbar">
      <PaginationMeta from={61} to={70} total={248} />
      <Pagination totalPages={25} defaultPage={7} align="end" />
    </div>
  );
}

import { Pagination } from "@/design-system/components/Pagination"; export function Example() { return ( <Pagination totalPages={24} defaultPage={7} tone="primary" variant="group" layout="full" align="end" showPrevNext showFirstLast siblingCount={1} boundaryCount={1} /> ); }

import { Pagination } from "@/design-system/components/Pagination"; export function Example() { return ( <> <Pagination totalPages={12} defaultPage={1} showPrevNext tone="neutral" /> <Pagination totalPages={12} defaultPage={6} disabled tone="neutral" /> </> ); }

import { Pagination } from "@/design-system/components/Pagination"; export function Example() { return ( <div className="stack-sm"> <Pagination totalPages={10} defaultPage={3} size="sm" /> <Pagination totalPages={10} defaultPage={3} size="md" /> <Pagination totalPages={10} defaultPage={3} size="lg" /> </div> ); }

import { Pagination } from "@/design-system/components/Pagination"; export function Example() { return ( <div className="stack-sm"> <Pagination totalPages={16} defaultPage={6} align="start" /> <Pagination totalPages={16} defaultPage={6} align="center" /> <Pagination totalPages={16} defaultPage={6} align="end" /> </div> ); }

import { Pagination } from "@/design-system/components/Pagination"; export function Example() { return ( <Pagination totalPages={18} defaultPage={9} variant="separated" tone="primary" showFirstLast showPrevNext /> ); }

import { Pagination } from "@/design-system/components/Pagination"; export function Example() { return ( <div className="stack-sm"> <Pagination totalPages={40} defaultPage={10} layout="simple" /> <Pagination totalPages={40} defaultPage={10} layout="compact" /> </div> ); }

import { Pagination, PaginationMeta } from "@/design-system/components/Pagination"; export function Example() { return ( <div className="pagination-toolbar"> <PaginationMeta from={61} to={70} total={248} /> <Pagination totalPages={25} defaultPage={7} align="end" /> </div> ); }