Component size, gzipped: 65kb

Pagination

Loading
API

Divide content into separate pages.

When to use

  • When the user will be searching for information rather than scanning.
  • When the user must maintain a sense of position amongst the paginated elements.

Accessibility

  • Tab moves focus among the focus-able elements (button, dropdown)
  • Escape closes the dropdown once opened
  • Up / Down Arrow Keys are used to navigate the options in the dropdown

Examples

Pagination Controlled example

of 20

Pagination Uncontrolled example

of 10

Pagination with Custom Labels

out of 10

Pagination with Overrides

of 10

API

Pagination props

currentPage
number
The currently selected page.
numPages
number
The total number of pages available.
onPageChange
function
Function called when page is changed.
overrides
custom
Lets you customize all aspects of the component.

Pagination exports

You can import this module like so:

import {Pagination} from 'baseui/pagination'

It exports the following components or utility functions: