Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pagination examples · Advanced

Disabled State Pagination for React

Pagination on the first page, with Previous disabled because there is no page before it.

Framework
UI library

Page 1 is current, so there is nowhere to go back to: Previous is disabled, faded and out of the tab order, while Next and the page numbers work. Disable the same way on the last page for Next.

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 Previous disabled?

PaginationPrevious takes aria-disabled="true", which the button styles fade and make ignore the pointer, and tabIndex -1, which takes it out of the tab order.

How do screen readers hear the disabled link?

As Go to previous page, dimmed or unavailable, because of aria-disabled. It stays in the reading order, so people know the control exists.

How is page 1 marked current?

isActive on that PaginationLink gives it the outline style and aria-current="page". Pages 2 and 3 are ghost links.

How do I disable Next on the last page?

The same way, on PaginationNext, when the current page is the last one. Decide both from your current page and page count.

Should I disable Previous or leave it out?

Disabling keeps the row from shifting between pages; leaving it out keeps the row shorter. Pagination doesn't know your page count: leave PaginationPrevious out on page 1 and PaginationNext out on the last page, or disable them.

How do I point the links at real pages?

Every href is #. Set each one to its page's URL, such as ?page=2.

All 19 pagination examples