Paginator

The paginator component allows dividing large amounts of content into multiple pages.

Specifications

Paginator design specifications

Anatomy

Paginator anatomy

1.
Container
2.
Items per page
3.
Items indicator
4.
Page actions
5.
Page selector

Design tokens

Color

Component token	Element	Core token	Value
`backgroundColor`	Container	`color-grey-100`	#f2f2f2
`fontColor`	Type all	`color-black`	#000000

Typography

Component token	Element	Core token	Value
`fontFamily`	Type all	`font-family-sans`	'Open Sans', sans-serif
`fontSize`	Type all	`font-scale-03`	1rem / 16px
`fontStyle`	Type all	`font-style-normal`	normal
`fontWeight`	Type all	`font-weight-regular`	400
`fontTextTransform`	Type all	-	none

Spacing

Component token	Element	Core token	Value
`marginRight`	Content	`spacing-32`	2rem / 32px
`marginLeft`	Content	`spacing-32`	2rem / 32px
`itemsPerPageSelectorMarginLeft`	Items per page	`spacing-0`	0rem / 0px
`itemsPerPageSelectorMarginRight`	Items per page	`spacing-16`	1rem / 16px
`pageSelectorMarginRight`	Page selector	`spacing-16`	1rem / 16px
`pageSelectorMarginLeft`	Page selector	`spacing-0`	0rem / 0px
`totalItemsContainerMarginRight`	Items indicator	`spacing-48`	3rem / 48px
`totalItemsContainerMarginLeft`	Items indicator	`spacing-0`	0rem / 0px

Size

Component token	Element	Core token	Value
`height`	Container	-	64px
`width`	Container	-	100%

Contents

Specifications
Anatomy
Design tokens

Edit this page on GitHub

Report an issue on GitHub

Previous