Pagination

Moves through pages of results.

<mm-pagination page="1" page-size="50" total="1284019" page-sizes="25,50,100"></mm-pagination>
<mm-pagination variant="compact" page="3" page-size="50" total="1284"></mm-pagination>
<!-- Cursor pagination: no total -->
<mm-pagination page="3" page-size="50" has-next></mm-pagination>

Guidance

Pagination moves through long result sets: Discover results, the query audit log, run history. It is a nav landmark labelled "Pagination" with previous and next buttons, page numbers with ellipses, and a "Showing 1–50 of 1,284,019" readout in tabular figures. The current page carries aria-current="page" and the selection tint with ink text. An optional page-size select offers 25, 50 and 100 rows; changing it keeps the first visible row on screen.

variant="compact" shows only previous, "Page 3 of 26" and next, for blades and narrow panels. Leave total unset for cursor pagination, where the total is unknown: only previous and next show, and has-next says whether there is another page.

Every control is a native button in the tab order (there is no composite keyboard model): Tab moves through them and Enter or Space activates. Previous and next stay focusable when disabled (aria-disabled), so focus is not lost on the first or last page.

Properties

Property	Attribute	Type	Default	Description
page	page	number	1	The current page, from 1.
pageSize	page-size	number	50	Rows per page.
total	total	number | undefined		Total rows. Leave unset (or negative) for cursor pagination with an unknown total.
hasNext	has-next	boolean	false	With an unknown total, whether there is a next page.
variant	variant	'default' | 'compact'	'default'	default (page numbers) or compact (previous, "Page 3 of 26", next).
pageSizes	page-sizes	string	''	Page sizes offered in the page-size select, comma separated. Empty hides the select.
siblings	siblings	number	1	Pages shown either side of the current one before an ellipsis.
label	label	string	''	Accessible name of the landmark, when a page has more than one paginated list. Defaults to "Pagination".
disabled	disabled	boolean	false	Disables every control, for example while a page loads.
pageCount		number | undefined		Number of pages, or undefined when the total is unknown.

Methods

Method	Description
goTo()	Goes to a page as if the user had chosen it, and fires mm-page-change.

Events

Event	Detail	Description
mm-page-change	CustomEvent<MmPageChangeDetail>	The page or page size changed by user action.

CSS parts

Part	Description
nav	The nav landmark.
summary	The "Showing 1–50 of 1,284,019" readout.
pages	The list of page buttons.
page	Each page button.
page-size	The page-size select.

Examples

Every state of mm-pagination in Storybook, with keyboard and screen reader tests.