Skip to content

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

Free

Previous and Next Only Pagination for Ark UI

Only a Previous button and a Next button, with no page numbers and no current page on screen.

The row is Previous, then Next. There are no page numbers, no ellipsis, and no current page. Both hrefs are #.

Use it for a feed or a cursor list where the total is unknown. When there is only a next page, a Button is enough. In React, Ark UI follows each href, and both of these are #.

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 href="#" />
    </PaginationItem>
    <PaginationItem>
      <PaginationNext href="#" />
    </PaginationItem>
  </PaginationContent>
</Pagination>

FAQ

What does this row render?

PaginationPrevious and PaginationNext, each in a PaginationItem. There is no PaginationLink and no page number.

What are the accessible names?

Previous is "Go to previous page" and Next is "Go to next page". The visible text defaults to "Previous" and "Next", in a span with hidden sm:block. The chevrons are aria-hidden. The nav is labeled "pagination".

How do I point Previous and Next at real pages?

Both use href="#". Set each href to that step's URL.

How do I change the words?

Pass text on PaginationPrevious and PaginationNext. The icon stays, and the accessible name stays "Go to previous page" or "Go to next page" unless you override aria-label.

How do I stop Previous on the first page?

This file always renders both controls as links. Pass count and Previous and Next disable themselves at the ends.

How do I show which page this is?

This file does not. Add a PaginationItem between the two controls if you want a label there. The two buttons alone do not announce a page number.

API Reference

Pagination

Sets href="#". The rest is on the Pagination page.

All 19 pagination examples