Design system

Pagination

Move through a bounded set of pages while keeping the current position clear.

Use pagination when a collection is split into discrete pages. Keep the current page visible, provide labelled previous and next controls, and collapse long ranges with an ellipsis.

Built on Workshop1 compositionUpstream API

Showing page 1 of 8

Usage

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

PaginationLink renders the active state and aria-current="page". Keep page changes connected to the owning route or query state in product screens.

Accessibility

Keep the current page marked with aria-current="page". Mark unavailable previous and next links with aria-disabled, remove them from the tab order, and preserve focus after a client-side change.

Best practices

  • Use real links so pages can be opened, copied, and restored from browser history.
  • Keep the first, last, current, and nearby pages visible in long ranges.
  • Preserve active filters and sorting in every page URL.