XDS — Design System

Pagination@xds/core v0.0.13 · XDSPagination

Usage

Pagination lets users step through pages of content. Place it below a table, list, or card grid so users can move forward and backward through results. Pick a variant to match the context — numbered pages for data tables, a count for large lists, compact for tight spaces, or dots for carousels.

ts
import {XDSPagination} from '@xds/core/Pagination'

Best practices

Guidance	Practices
Do	Place pagination below the content it controls so users see results before navigating.
Do	Use the pages variant for data tables where users need to jump to a specific page.
Do	Use the count variant with a page size selector when users need to control how many items they see at once.
Do	Use the dots variant for carousels and walkthroughs where the total is small and position matters more than a number.
Do	Pass totalItems when the total is known so users can see how much content remains.
Don't	Show pagination when all items fit on a single page — there is nothing to paginate.
Don't	Use the dots variant for more than about 10 pages — the dots become too small to be useful.
Don't	Place pagination above the content — users expect it at the bottom.

Examples

Common configurations, variations, and states.

Pagination — Dots Carousel

No description available.

Pagination — Page Size Selector

A transactions table with pagination and a page size dropdown at the bottom. Shows how pagination works as a footer below real content, with adjustable rows per page.

Pagination — With Table

Pagination below a data table with client-side page slicing. Use the count variant with small size for dense data views where users need to see item ranges.