Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Navigation

Pagination Button Group for React

Pagination in a button group with Previous and Next around page numbers, and a compact row showing the page out of ten.

Framework
UI library

Page navigation as one joined strip. Previous and Next step through ten pages and stop at the ends; the numbered buttons jump to pages 1 to 5, and the current page is filled and marked with aria-current. The second row is the compact form for small screens.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the page tracked?

A number starting at 3, out of 10. Each page button carries its number as its value, and Previous and Next step by one.

When are Previous and Next disabled?

Previous on page 1 and Next on page 10, in both rows. They get disabled from those checks.

How is the current page shown?

Its button uses variant="default" and sets aria-current="page". On pages 6 to 10 none of the numbers are filled, since only 1 to 5 are listed.

What is in the compact row?

Icon-only previous and next buttons, named Previous page and Next page with aria-label, around a button that reads Page 3 of 10. That middle button has no handler.

How do I show pages around the current one?

Compute the list of page numbers from the current page, with an ellipsis where pages are skipped. The Pagination component has parts for that.

All 39 button group examples