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

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!

Pagination API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Pagination API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>