Responsive layout
- Small screens — Pagination controls stack vertically to accommodate limited horizontal space
- Larger viewports — Pagination displays inline horizontally with all controls visible
Page controls
By default, specific page number controls are shown. The component is bookended by icon buttons (previous and next arrows) that allow the user to move to the previous or next page.
The available viewport width determines how many page controls are displayed.
First and last pages
The first and last page should always be displayed. A non-interactive separator can be used to show the division in steps when there are many pages.
Examples of the first and last items being selected
- Shows: Previous arrow | 1 | 2 | 3 | 4 | 5 | Next arrow
- All pages visible, no ellipsis needed
Large collections
Example of a large viewport pagination with an item per page control
- Shows: Previous arrow | 1 | 2 | 3 | 4 | 5 | 6 | ... | 10 | Next arrow
- First few pages, a few middle pages near current, ellipsis, last page
Items per page
Two small viewport examples with and without items per page
The number of items per page can be preset, or optionally controlled by the user through a select dropdown.
When including the "per page" control:
- Position it near the pagination controls (typically on the right)
- Label it clearly (e.g., "10 per page")
- Provide sensible options (e.g., 10, 25, 50, 100)
- Remember the user's selection as they navigate between pages