LOKE Design System
Components

Pagination

Navigation controls for paginated content with previous, next, and page links.

Pagination

The Pagination component provides navigation controls for content split across multiple pages. It includes previous/next buttons, page number links, and ellipsis for large page ranges.

Pagination is a composable component. Combine the subcomponents to build your desired pagination UI.

Features

  • Previous and next navigation buttons
  • Individual page number links
  • Ellipsis for large page ranges
  • Active page indicator
  • Disabled state support
  • Accessible navigation landmark

Usage

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationPrevious,
  PaginationNext,
  PaginationEllipsis,
} from '@loke/design-system/pagination';

export default function Example() {
  return (
    <Pagination>
      <PaginationContent>
        <PaginationItem>
          <PaginationPrevious href="#" />
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">1</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#" isActive>2</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationLink href="#">3</PaginationLink>
        </PaginationItem>
        <PaginationItem>
          <PaginationNext href="#" />
        </PaginationItem>
      </PaginationContent>
    </Pagination>
  );
}

Tips:

  • Use isActive to highlight the current page.
  • Use PaginationEllipsis for gaps in page numbers.
  • Disable buttons when on first/last page.

Components

Pagination

The root container. Uses <nav> with aria-label="pagination".

PaginationContent

The <ul> element containing pagination items.

PaginationItem

Individual <li> element wrapping each pagination control.

Prop

Type

PaginationPrevious / PaginationNext

Pre-styled links for previous/next navigation with chevron icons.

PaginationEllipsis

Displays "..." to indicate omitted pages.

Examples

Basic pagination

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

With ellipsis

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">4</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>5</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">6</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationEllipsis />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">10</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Disabled navigation

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious href="#" disabled />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" isActive>1</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">2</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#">3</PaginationLink>
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

Accessibility

  • Uses <nav> element with aria-label="pagination".
  • Current page indicated with aria-current="page".
  • Ellipsis is hidden from screen readers with aria-hidden.
  • Previous/Next buttons have descriptive aria-label attributes.
  • Disabled links are visually indicated.

Best practices

  • Always indicate the current page with isActive.
  • Disable Previous on first page and Next on last page.
  • Use ellipsis for large page ranges (more than 7 pages).
  • Show first, last, and surrounding pages around current.
  • Consider using buttons with onClick handlers for client-side routing.
  • Keep pagination at consistent locations (typically at bottom of content).

Table

A component for displaying tabular data in rows and columns.

Toast

A notification component for displaying brief messages.

On this page

PaginationFeaturesUsageComponentsPaginationPaginationContentPaginationItemPaginationLinkPaginationPrevious / PaginationNextPaginationEllipsisExamplesBasic paginationWith ellipsisDisabled navigationAccessibilityBest practices