Components/Navigation
Pagination
Pagination splits a long list or table into pages, and shows people where they are and how much is left
Playground
Pick a variant, then page through 120 results or change the rows per page
Types
All three keep the page controls on the right. The left side holds what people need next: a rows select, a count, or nothing but the context
Sizes
Match the table or list it controls: Large for full pages, Medium for most tables, Small inside cards and side panels
States
Numbers and actions are flat until hovered. The current page gets a stroke/soft-200 outline, and actions at either end are disabled
When to use
Use when
- A table or list has more items than fit comfortably on one screen
- People need to jump to a page or come back to the same place later
- The total count helps people judge how much is left
Avoid when
- People browse a feed with no end, load more as they scroll
- The list is short enough to show in full
- People move through steps of one task, use a Stepper
Do and don’t
Disable Previous on the first page and Next on the last, so the ends are clear
Don’t list every page number, keep the first, the last and the ones around the current page