NAVIGATION / COMPONENTS
Pagination
Move through a bounded set of results.
About pagination
Pagination is a helpful component that allows users to digest large amounts of search results in segmented groups.
Anatomy
Shared parts, named consistently.
Page 1 of 12
- 1First page button
A button to jump to the first page.
- 2Button groupRequired
The group of buttons
- 3Jumper
An input to jump to any page
- 4Previous button
A button to navigate to previous page
- 5Page buttonRequired
A button to navigate to the named page
- 6Current page border
A border to indicate the current page
- 7Divider
An element to separate the buttons
- 8Next page button
A button to navigate to the next page
- 9Last page button
A button to navigate to the last page
Try the default
A working example with the shared V1 visual language.
Page 1 of 12
When to use
Use when results need stable pages. Keep the current page explicit and disable unavailable previous/next actions.
Tab reaches page controls; Enter or Space changes the page. Current page is exposed through aria-current.