Navigation

Pagination

Moves through pages of results with previous, next and numbered controls.

Selector: mui-pagination

Import

import { Pagination } from '@mushilu-san/ui/navigation';

Preview

Code

Loading example…

Overview

Pagination renders a role="navigation" with previous and next buttons and page buttons. The current page is a two-way page model, and totalPages sets the range.

Long ranges collapse to ellipses around the current page. siblingCount sets how many pages show on each side of it.

When to use

Lists of results split across pages, such as search results or a table of records.
Any list where the user needs to jump to a page by number.

When not to use

A short list that fits on one screen.
An endless feed. Use a "Load more" button. Use Button instead.

Guidelines

Do

Show the total result count near the list so users know how many pages there are.
Keep the page the user is on in the URL when the list is shareable.

Don't

Do not hide pagination when there is only one page. Disable the controls instead.

Accessibility

Roles and attributes

Element	Role	Notes
`host`	navigation	`aria-label` from `ariaLabel`, default "Pagination".
`previous / next`	button	Labelled "Go to previous page" and "Go to next page". `aria-disabled` at the ends.
`page`	button	Labelled "Page N". `aria-current="page"` on the current page.

Keyboard

Keys	Action
`TabShiftTab`	Moves between the page controls.
`EnterSpace`	Goes to the focused page.

Ellipses are decorative and hidden from assistive technology.

API