feat: Add `disable` prop to pagination buttons.

[ahkhanjani]

I'm specifically asking this for Previous and Next buttons because in a dynamic client-side pagination, you don't really want to remove and add them to the UI. I couldn't find any ways to disable them.

[DariusLukasukas]

I ran into the same issue with needing to disable the "Previous" and "Next" Links in dynamic client-side pagination, here is a potential solution using the PaginationPrevious component that worked for me:

  <PaginationItem>
          <PaginationPrevious
            href={createPageURL(currentPage - 1)}
            aria-disabled={currentPage <= 1}
            tabIndex={currentPage <= 1 ? -1 : undefined}
            className={
              currentPage <= 1 ? "pointer-events-none opacity-50" : undefined
            }
          />

This code disables the button visually and functionally when on the first page by:

• Setting aria-disabled to true.
• Setting tabIndex to -1.
• Applying CSS classes: pointer-event-none and opacity-50.

I hope it helps :)

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[ahkhanjani]

reopen the issue

[cgar420]

reopen sesame

[nuclei272]

The workaround is to make the href undefined in specific scenarios... Here's my workaround:

<PaginationItem> <PaginationFirst href={currentPage === 1 ? undefined : ${href}?page=${currentPage > 1 ? currentPage - 1 : 1}} aria-disabled={currentPage === 1} className={ currentPage === 1 ? "hover:bg-transparent cursor-default hover:text-muted-foreground text-muted-foreground opacity-50" : "hover:cursor-pointer" } /> </PaginationItem>

[fazal199]

<PaginationPrevious className={${!hasPreviousPage && 'active:bg-white opacity-60'}} href={!hasPreviousPage ? undefined : 'your url' } />

this one worked for me :)