Pagination
A bounded page selector with previous and next actions, current-page semantics and compact numbered ranges.
Component references
- Comparison revealDisplays
- Elastic segmentInputs
- Activity streamFeedback
- Pixel reveal cardMotion
Implementation
1"use client";2 3import { useState, type HTMLAttributes } from "react";4import { ChevronLeft, ChevronRight } from "lucide-react";5 6export type PaginationProps = HTMLAttributes<HTMLElement> & {7 totalPages: number;8 page?: number;9 defaultPage?: number;10 onPageChange?: (page: number) => void;11 siblingCount?: number;12 disabled?: boolean;13 label?: string;14 previousLabel?: string;15 nextLabel?: string;16 emptyLabel?: string;17};18 19/** Local result navigation with bounded page buttons and noninteractive gaps. */20export function Pagination({21 totalPages,22 page,23 defaultPage = 1,24 onPageChange,25 siblingCount = 1,26 disabled = false,27 label = "Pagination",28 previousLabel = "Previous",