LOKE Design System
GuidesDesign SystemUIIcons
Data & Display

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).

Heading

Semantic heading component with variant-based styling and responsive support.

Separator

A visual divider for separating content sections.

On this page

PaginationFeaturesUsageComponentsPaginationPaginationContentPaginationItemPaginationLinkPaginationPrevious / PaginationNextPaginationEllipsisExamplesBasic paginationWith ellipsisDisabled navigationAccessibilityBest practices