HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
Pagination
Last Updated on Sep 29, 2022
Pagination is used when there are too many results on a page. It allows the user to navigate between pages.
View Figma ComponentView MAF Storybook

Design Principles

  • Pagination is mostly used with tables, but can be used for other kinds of ways to display data.
  • Pagination is optional. Some types of tables or data will not require its use.
  • The component has several variants with various levels of complexity. Use the simplest variant that works best for your data. Items showing 6+ pages, “Rows Per Page”, “Go to Page”, etc. are acceptable, but should only be used if the navigating data requires them. Their usage can be influenced by system load times, amount of data, and screen space.
  • Usually, pagination is positioned in the bottom-right, below content.
  • Previous button is disabled by default because the data loaded should be "Page 1" of a large set.

Do's and Don'ts

Use the simplest variant of pagination as possible.
Check with your development teams to see if pagination is required.
Don’t mix infinite scrolling and pagination. Choose one or the other.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Table
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.