1. When to Use

Pagination should be used when there is a large amount of content that can't be shown in one view and needs to be broken down into multiple pages.

2. Loading State

If the content takes longer than 2 seconds to load, then a Loader should be displayed.

3. Visibility

Make sure that the pagination is visible and easy to find in relation to the content. No other elements should separate the pagination from the content.

4. Scrolling

If there is scrollable content, the pagination should be displayed in a container that is fixed and always visible below the content. Avoid hiding the pagination at the bottom of scrollable content. The container should have a top border. When used within a modal, the pagination should be displayed in the modal footer.

5. Alignment

The pagination should be aligned to the right side of it's container below the page content.

6. Pagination vs Step Progress

Pagination shouldn't be used to break up user work flows. Use a Step Progress Bar instead.

7. Pagination vs Infinite scroll

Pagination should be used when the user is looking for something specific such as a campaign or line item. Infinite scrolling should be used for content discovery such as browsing report templates.

8. Bulk edit

If paginated content can be bulk edited, only the visible items will be edited. Provide a count in the UI that tells the user that they are editing only the visible items. If the user navigates to a new page using the pagination, the selections from the previous page will be lost, and the count will reset to none.