Skip to content

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

Free

Disabled State Pagination for Vue

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

UI library: Ark UI

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 Vue, Ark UI fades the control once you mark it unavailable.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Pagination>
  <PaginationContent>
    <PaginationItem>
      <PaginationPrevious aria-disabled="true" href="#" :tabIndex="-1" />
    </PaginationItem>
    <PaginationItem>
      <PaginationLink href="#" :isActive="true">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. Pass count and bind v-model:page. Previous and Next then disable themselves at the ends.

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