Edit this page
[?] Component size, gzipped: 189kb

Pagination

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

Overrides

Additionally, you can fully customize any part of the Pagination through the overrides prop. The Pagination consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

of 10

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Pagination API

onPrevClick function

Callback for prev button click.

event exists required *
 => *

onNextClick function

Callback for next button click.

event exists required *
 => *

onPageChange function

Callback for when page changes.

nextPage number required
prevPage number required
=> *

numPages number required

Max number of pages.

currentPage number required

The current page.

labels object = {}

Set of labels to use for the buttons and preposition.

prevButton string
nextButton string
preposition string

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
PrevButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NextButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaxLabel { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
DropdownContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Select { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

Stateful Pagination API

onPrevClick function

Callback for prev button click.

event exists required *
 => *

onNextClick function

Callback for next button click.

event exists required *
 => *

onPageChange function

Callback for when page changes.

nextPage number required
prevPage number required
=> *

numPages number required

Max number of pages.

labels object

Set of labels to use for the buttons and preposition.

prevButton string
nextButton string
preposition string

stateReducer function = (changeType, changes) => undefined

Reducer function to manipulate internal state updates.

function
$Keys{ changePage: "changePage" },
currentPage number required
,
currentPage number required
=>
currentPage number required

initialState object = { currentPage: 1 }

Initial state populated into the component

currentPage number required

overrides object = {}

Root { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
PrevButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
NextButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaxLabel { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
DropdownContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Select { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

Pagination exports

You can import this module like so:

import {Pagination} from 'baseui/pagination'

It exports the following components or utility functions:

  • Pagination
  • StatefulPagination
  • StatefulContainer
  • StyledRoot
  • StyledMaxLabel
  • StyledDropdownContainer
  • STATE_CHANGE_TYPE