Pagination

A pagination links the pages of a list that is too long for one view. Users open a page by its number or move one page back or forward, and the outlined number shows them which page they are on.

UsageCopy Anchor Link

import {
	Pagination,
	PaginationContent,
	PaginationItem,
	PaginationLink,
	PaginationNext,
	PaginationPrevious,
} from "@biem/ui/components/ui/pagination";

export function PaginationDefault() {
	return (
		<Pagination>
			<PaginationContent>
				<PaginationItem>
					<PaginationPrevious href="/inventory/transfers?page=1"/>
				</PaginationItem>
				<PaginationItem>
					<PaginationLink href="/inventory/transfers?page=1">1</PaginationLink>
				</PaginationItem>
				<PaginationItem>
					<PaginationLink href="/inventory/transfers?page=2" isActive>2</PaginationLink>
				</PaginationItem>
				<PaginationItem>
					<PaginationLink href="/inventory/transfers?page=3">3</PaginationLink>
				</PaginationItem>
				<PaginationItem>
					<PaginationNext href="/inventory/transfers?page=3"/>
				</PaginationItem>
			</PaginationContent>
		</Pagination>
	);
}

ExamplesCopy Anchor Link

Extra SmallCopy Anchor Link

A list in a narrow side panel, such as the recent movements of one article, leaves little room for its pagination. Set to "xs" on the previous and next links and to "icon-xs" on the page numbers, size keeps the pagination at its most compact, so the list stays in the foreground.

SmallCopy Anchor Link

Cards and dialogs often hold a short list that users page through without leaving their task. In such a place, size set to "sm" on the previous and next links and "icon-sm" on the page numbers brings the pagination to the scale of a small button, so it fits in without drawing attention from the list.

Default SizeCopy Anchor Link

Most lists in the body of a page, such as all open purchase orders of a store, need no size of their own. Left without a size, the page numbers take "icon" and the previous and next links take "default", so pagination keeps one scale across every product.

LargeCopy Anchor Link

On a tablet in the store, users page through lists such as the open counting tasks with a finger. With size set to "lg" on the previous and next links and "icon-lg" on the page numbers, every link offers a larger target and is easier to hit.

With EllipsisCopy Anchor Link

Long lists can have more pages than a pagination can show at once. The ellipsis stands for the pages that are left out, so the pagination stays compact and users still see that further pages exist. Assistive technology skips it and announces only the links that users can follow.

Custom TextCopy Anchor Link

Where a list follows an order of its own, such as the date of each entry, words that name this order guide users better than a plain step back or forward. Through text, the previous and next links carry those words. Since assistive technology keeps announcing the previous or next page whatever the text says, aria-label passes the same meaning on to users who rely on it.

Active PageCopy Anchor Link

Before users choose another page, they need to know which page they are on. Marked with isActive, a page link shows them that place at once, and assistive technology announces it as the current page.

API ReferenceCopy Anchor Link

PaginationCopy Anchor Link

Pagination marks its links as navigation, labels them "pagination" for assistive technology, and centers them in the available width. It renders a nav and has no props of its own.

PaginationContentCopy Anchor Link

PaginationContent holds the items in a row. It renders a ul and has no props of its own.

PaginationItemCopy Anchor Link

PaginationItem holds one entry of the row: a page link, the previous link, the next link or the ellipsis. It renders an li and has no props of its own.

PaginationLinkCopy Anchor Link

PaginationPreviousCopy Anchor Link

PaginationNextCopy Anchor Link

PaginationEllipsisCopy Anchor Link

PaginationEllipsis stands for the pages that a shortened pagination leaves out. It renders a span with three dots, which assistive technology skips, and has no props of its own.