Content
cellsThree-digit pages
Studio A · 2:00 PMStudio B · 4:30 PM
Studio A · 2:00 PMStudio B · 4:30 PM
Pagination
React v2Package-backed paging forms, dot and line indicators, and a headless namespace, all controlled by product state.
Pagination
React v2Package-backed paging forms, dot and line indicators, and a headless namespace, all controlled by product state.
Demo
heroComponent*
total*
siblingCount*
import { useState } from "react";
import { PaginationPageDefault } from "@parentsquare/squarekit-react-v2/paginations";
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
Loading
cellsLoading pagination
Loading pagination
States
cellsStudio A · 2:00 PMStudio B · 4:30 PM