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
| 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. |
A review carousel using dot pagination to step through testimonial cards. Use the dots variant for carousels, galleries, and any paged content where the total is small and visible position matters more than a page number.
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 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.