Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
93 lines (73 sloc) 2.16 KB

import Example from '../../components/example'; import API from '../../components/api'; import Layout from '../../components/layout';

import Controlled from 'examples/pagination/controlled.js'; import Uncontrolled from 'examples/pagination/uncontrolled.js'; import Labels from 'examples/pagination/labels.js'; import Customization from 'examples/pagination/overrides.js';

import Overrides from '../../components/overrides'; import {StatefulPagination} from 'baseui/pagination'; import * as PaginationExports from 'baseui/pagination';

export default Layout;


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.


  • 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

<Example title="Pagination Controlled example" path="pagination/controlled.js"

<Example title="Pagination Uncontrolled example" path="pagination/uncontrolled.js"

<Example title="Pagination with Custom Labels" path="pagination/labels.js"

<Example title="Pagination with Overrides" path="pagination/overrides.js"


<Overrides name="Pagination" component={PaginationExports} whitelisted={[ 'Root', 'PrevButton', 'NextButton', 'MaxLabel', 'DropdownContainer', 'Select', ]} renderExample={props => ( )} />

<API heading="Pagination API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/pagination/pagination.js')} />

<API heading="Stateful Pagination API" api={require('!!@uber-web-ui/extract-react-types-loader!../../../src/pagination/stateful-pagination.js')} />

You can’t perform that action at this time.