Pagination

Not in Production

Page pagination — segmented page numbers with optional first/last. Figma Pagination type=page. Table pagination is TablePagination (same docs page).

Preview

Code

Inspect

count *

page

disabled

siblingCount

boundaryCount

showFirstButton

showLastButton

aria-label

Prop	Type	Description
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Control height. Default medium (40).
`count`	`number`	Total number of pages.
`page`	`number`	1-based current page (controlled).
`defaultPage`	`number`	Initial page when uncontrolled.
`onChange`	`(event, page: number) => void`	Called when the page changes.
`layout`	`"auto" \| "segmented" \| "compact"`	Narrow-container behavior. auto swaps to compact (prev + Page X of Y + next) when the segmented trail would overflow.
`labelCompactPages`	`(args: { page: number; count: number }) => ReactNode`	Formats the compact-mode label. Default "Page X of Y".
`showFirstButton`	`boolean`	Show jump-to-first (Figma hasFirstLast).
`showLastButton`	`boolean`	Show jump-to-last (Figma hasFirstLast).
`siblingCount`	`number`	Pages shown on each side of the current page.
`boundaryCount`	`number`	Pages always shown at the start and end.
`disabled`	`boolean`	Disables all items.
`aria-label`	`string`	Accessible name for the pagination navigation.

Prop	Type	Description
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Control height. Default medium (40).
`count`	`number`	Total number of rows.
`page`	`number`	0-based page index (MUI TablePagination).
`rowsPerPage`	`number`	Rows shown per page.
`onPageChange`	`(event, newPage: number) => void`	Called when prev/next changes the page.
`onRowsPerPageChange`	`(event) => void`	Called when the rows-per-page Dropdown changes.
`rowsPerPageOptions`	`Array<number \| { value: number; label: string }>`	Options for the rows-per-page Dropdown.
`labelRowsPerPage`	`ReactNode`	Label before the rows-per-page control.
`labelDisplayedRows`	`(args) => ReactNode`	Formats the range text (from-to of count).
`disabled`	`boolean`	Disables controls.
`aria-label`	`string`	Accessible name for the table pagination region.