@wfp/react/src/components/Pagination/README.mdx

WFP UI Kit

## Usage

Generally, pagination is used if there are too many items displayed in one view. The default number displayed will vary depending on the context.

### Usage with react

```js
import { Pagination } from '@wfp/react';
```

## Best practices

#### Identify the current page

Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total (e.g. 1 of 4 pages), you can help provide clarity around the data displayed.

#### Provide various options for navigating

Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data. Provide an inline select in which users can choose the page they wish to navigate to.

#### Items per page

Use an inline select within the pagination bar so the user can change the amount of data displayed per page.

## Reference

[Carbon Design System Usage for pagination](https://www.carbondesignsystem.com/components/pagination/usage)