Content
cellsThree-digit pages
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Pagination
Moves a reader through a finite, ordered collection: eight assembled forms over one headless namespace, all controlled by your state.
Pagination
Moves a reader through a finite, ordered collection: eight assembled forms over one headless namespace, all controlled by your state.
Demo
heroComponent
total
siblingCount
import { useState } from "react";
import { PaginationPageDefault } from "@/components/application/pagination/pagination";
const [page, setPage] = useState(1);
<PaginationPageDefault
page={page}
onPageChange={setPage}
total={10}
/>
In context
in-contextFamily
familyPaginationPageDefault
PaginationPageMinimalCenter
PaginationCardDefault
PaginationLine
Pagination
Types
cellsThe six paging forms, and the three that take rounded.
Page forms
Card forms
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
rounded
Studio A · 2:00 PMStudio B · 4:30 PM
Layouts
cellsalign, on the three forms that take it.
PaginationCardMinimal align
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
PaginationButtonGroup align
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
PaginationCardAdvanced align
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Behaviour
cellsThe ellipsis
Below md
PaginationCardMinimal: arrows around the count
PaginationButtonGroup: five cells, icon-only triggers
PaginationCardAdvanced: first and last jumps kept
Loading
cellsLoading pagination
Loading pagination
States
cellsStudio A · 2:00 PMStudio B · 4:30 PM