---
name: Pagination
route: /components/common/pagination
edit: false
---

import { Playground, Props } from 'docz'
import { State } from 'react-powerplug'
import Pagination from './pagination'

# Pagination
**SUBCATEGORY:** Navigation

<hr />

## Pagination
### Description
A mechanism for browsing through single parts of content or a list of items.

<Playground>

  <State initial={{ currentPage: 1 }}>
    {({ state, setState }) => (
      <Pagination
        currentPage={state.currentPage}
        onPageChanged={value => setState({ currentPage: value })}
        hrefBuilder={page => `https://www.economist.com/section?page=${page}`}
        totalPages={210}
      />
    )}
  </State>
</Playground>

<hr />

## Properties
<Props of={Pagination} />