Pagination
Pagination provides controls for moving through pages of content.
Source
LLM docs
Package
Examples
5
Properties
55
Playground
Basics
Provide
value, total, and an onChange handler to keep numbered pagination in sync with surrounding state.Loading demo…
import { useState } from 'react';
import { Block, Pagination, Text } from '@plocks/ui';
export function Demo() {
const [currentPage, setCurrentPage] = useState(1);
const totalPages = 10;
return (
<Block>
<Pagination value={currentPage} total={totalPages} onChange={setCurrentPage} />
<Text size="xs" c="secondary">
Page {currentPage} of {totalPages}
</Text>
</Block>
);
}Variants
Switch the
variant prop between default, outline, and subtle to align pagination with the surrounding surface treatment.Loading demo…
import { useState } from 'react';
import { Block, Pagination, Text } from '@plocks/ui';
export function Demo() {
const [defaultPage, setDefaultPage] = useState(5);
const [outlinePage, setOutlinePage] = useState(5);
const [subtlePage, setSubtlePage] = useState(5);
return (
<Block>
<Block>
<Pagination value={defaultPage} total={15} onChange={setDefaultPage} variant="default" />
<Text size="xs" c="secondary">
Default variant keeps the control fully filled. Page {defaultPage} of 15.
</Text>
</Block>
<Block>
<Pagination value={outlinePage} total={15} onChange={setOutlinePage} variant="outline" />
<Text size="xs" c="secondary">
Outline keeps the surface quiet while the active page gets a stroke. Page {outlinePage} of 15.
</Text>
</Block>
<Block>
<Pagination value={subtlePage} total={15} onChange={setSubtlePage} variant="subtle" />
<Text size="xs" c="secondary">
Subtle removes backgrounds for tinted surfaces. Page {subtlePage} of 15.
</Text>
</Block>
</Block>
);
}Sizes
Use the
size prop (xs through 3xl) to match pagination density to its container without changing behavior.Loading demo…
import { useState } from 'react';
import { Block, Pagination, Text } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'] as const;
export function Demo() {
const [page, setPage] = useState(3);
return (
<Block>
{SIZES.map((size) => (
<Block key={size}>
<Text variant="small" c="secondary">{size}</Text>
<Pagination value={page} total={8} onChange={setPage} size={size} />
</Block>
))}
</Block>
);
}Advanced
Combine
showFirst, showPrevNext, siblings, and boundaries to reveal the right amount of context for long result sets.Loading demo…
import { useState } from 'react';
import { Block, Pagination, Text } from '@plocks/ui';
export function Demo() {
const [page1, setPage1] = useState(10);
const [page2, setPage2] = useState(15);
const [page3, setPage3] = useState(25);
return (
<Block>
<Block>
<Pagination
value={page1}
total={30}
onChange={setPage1}
showFirst
showPrevNext
siblings={2}
boundaries={2}
/>
<Text size="xs" c="secondary">
Includes first and last buttons. Page {page1} of 30.
</Text>
</Block>
<Block>
<Pagination
value={page2}
total={40}
onChange={setPage2}
showPrevNext
siblings={1}
boundaries={1}
/>
<Text size="xs" c="secondary">
Minimal navigation with prev/next only. Page {page2} of 40.
</Text>
</Block>
<Block>
<Pagination
value={page3}
total={50}
onChange={setPage3}
showPrevNext
siblings={0}
boundaries={1}
size="sm"
/>
<Text size="xs" c="secondary">
Compact layout with tight siblings. Page {page3} of 50.
</Text>
</Block>
</Block>
);
}Total & size changer
Set
showTotal with totalItems to render an "X-Y of N" summary, and showSizeChanger with pageSizeOptions / onPageSizeChange to let users change the rows-per-page. This is the same footer the DataTable renders internally.Loading demo…
import { useState } from 'react';
import { Block, Pagination, Text } from '@plocks/ui';
export function Demo() {
const totalItems = 248;
const [pageSize, setPageSize] = useState(10);
const [current, setCurrent] = useState(1);
const total = Math.max(1, Math.ceil(totalItems / pageSize));
return (
<Block>
<Pagination
value={current}
total={total}
onChange={setCurrent}
showTotal
totalItems={totalItems}
pageSize={pageSize}
showSizeChanger
pageSizeOptions={[10, 20, 50, 100]}
onPageSizeChange={(size) => {
setPageSize(size);
setCurrent(1);
}}
/>
<Text size="xs" c="secondary">
Page {current} of {total} · {pageSize} rows per page
</Text>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources