Pagination Navigation controls for moving through paged data or content.
Pagination provides composable pagination primitives plus PaginationRoot, a managed pagination renderer with controlled and URL-state modes.
Generated PaginationRoot controls render as real buttons. If you provide href to an individual PaginationLink, that link renders as an anchor while keeping Cubitt button styling.
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationRoot, } from "@tilt-legal/cubitt-components/pagination" ; < PaginationRoot currentPage = { 2 } onPageChange = {( page ) => setPage (page)} totalPages = { 20 } /> < Pagination > < PaginationContent > < PaginationItem > < PaginationPrevious href = "/page/1" /> </ PaginationItem > < PaginationItem > < PaginationLink href = "/page/2" isActive > 2 </ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationNext href = "/page/3" /> </ PaginationItem > </ PaginationContent > </ Pagination > Preview Code
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@tilt-legal/cubitt-components/pagination" ; < Pagination > < PaginationContent > < PaginationItem > < PaginationPrevious href = "#" /> </ PaginationItem > < PaginationItem > < PaginationLink href = "#" >1</ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationLink href = "#" isActive > 2 </ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationLink href = "#" >3</ PaginationLink > </ PaginationItem > < PaginationItem > < PaginationEllipsis /> </ PaginationItem > < PaginationItem > < PaginationNext href = "#" /> </ PaginationItem > </ PaginationContent > </ Pagination >; Preview Code
import { PaginationRoot } from "@tilt-legal/cubitt-components/pagination" ; < PaginationRoot maxVisiblePages = { 5 } paramClearOnDefault paramName = "demo-page" totalPages = { 20 } />; Prop Type Default Description currentPagenumberURL value or 1 Controlled active page. totalPagesnumber– Total number of pages. onPageChange(page: number) => void– Called when a generated page control is clicked. showPrevNextbooleantrueShow previous and next controls. showFirstLastbooleantrueShow first and last page controls when they are outside the visible range. maxVisiblePagesnumber5Maximum number of page number controls in the main range. paramNamestring– URL search parameter name for URL-state mode. paramValuenumber– External URL-state value override. onUrlValueChange(page: number | null) => void– Called when URL state changes. paramClearOnDefaultboolean– Remove the URL param when page equals the default value. paramDebouncenumber– Debounce URL updates in milliseconds. paramThrottlenumber– Throttle URL updates in milliseconds. classNamestring– Additional classes for the pagination root.
Prop Type Default Description classNamestring– Additional classes for the nav.
Prop Type Default Description classNamestring– Additional classes for the list.
Uses Button styling internally. Active links use the secondary button variant; inactive links use ghost.
Prop Type Default Description isActivebooleanfalseMarks the link as the current page. hrefstring– When provided, renders as an anchor. size"sm" | "md" | "lg""md"Button size. mode"icon" | "input""icon"Button mode. disabledbooleanfalseDisable the control when rendered as a button. classNamestring– Additional classes for the control.
Convenience wrappers around PaginationLink with directional icons and accessible labels.
Prop Type Default Description hrefstring– When provided, renders as an anchor. disabledbooleanfalseDisable the generated button control. classNamestring– Additional classes for the control.
Prop Type Default Description classNamestring– Additional classes for the ellipsis item.