Spryker

Pagination

Navigate between pages of data.

247 items

Variants

Pagination comes in one visual variant. Size is chosen per context — SM in dense tables, MD everywhere else.

VariantPurpose
DefaultPrev/next arrows, numbered items with collapsed ellipsis, and an item count.

Design tokens

TokenValueDescription
background/surface
transparent
Resting item background
background/subtle
#f5f5f5
Hover item background
background/brand/primary
#318272
Active item background
background/brand/hover
#226558
Active hover background
text/primary
#3b3b3d
Default item text
text/secondary
#4f5052
Ellipsis colour
text/disabled
#8f8f8f
Disabled text
text/inverse
#ffffff
Active item text
radius/md
8px
Corner radius
stroke
none
No borders on any state
size
32 / 36
SM / MD dimensions

Guidelines

Do
  • Default to 25 items per page for dense data tables
  • Show the total item count so users know the data volume
  • Show first and last pages for orientation
  • Reset to page 1 when the user changes page size
Don't
  • Paginate fewer than 10 items — show them inline
  • Change page size without resetting to page 1
  • Omit prev/next arrows — keyboard and touch users rely on them
  • Use pagination for infinite scroll — use a "Load more" button
AlertTabs