Pagination

Numbered Pagination

Import

import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@mikenotthepope/substrateui"

Composition

Pagination
└── PaginationContent
    └── PaginationItem
        ├── PaginationPrevious
        ├── PaginationLink
        └── PaginationNext

Direction

Previous and next buttons swap visually in RTL — the previous link sits on the right, next on the left, and the chevron icons rotate to point in reading direction. Order within the list follows the DOM, so logical ordering is preserved.

Labels

Three of the four strings are accessible names for controls that show only an icon or an ellipsis. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's pagination key — the provider is how you translate the set once instead of at each call site.

API Reference