Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Disabled State Pagination for React

Page 1 is current, Previous is faded and left out of the tab order, and pages 2, 3, and Next still work.

Page 1 is current. Previous is faded and skipped in the tab order, because there is no earlier page. Pages 2 and 3 and Next are ordinary links. Every href is #.

Mark Previous unavailable on the first page, and Next on the last, so people cannot leave the list. A Select can jump to a page instead of stepping. In React, Base UI fades the control once you mark it unavailable.

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

Anatomy

Pagination anatomy: root, previous, item, ellipsis, next

Usage

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious aria-disabled="true" href="#" tabIndex={-1} />
    </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>

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.

API Reference

Pagination

Sets aria-disabled, href="#", tabIndex={-1} and isActive. The rest is on the Pagination page.

All 19 pagination examples