Live demo
Click page numbers or Prev/Next to navigate. Ellipsis collapses distant pages once the range exceeds 7 items.
Page 1 of 12
States
First page
Page 1 of 12
Middle
Page 6 of 12
Last page
Page 12 of 12
Short range
Page 3 of 5
Ellipsis compression
≤ 7 pagesAll pages shown — no ellipsis.Near the start[1] [2] [3] … [N] — right ellipsis only.Near the end[1] … [N−2] [N−1] [N] — left ellipsis only.In the middle[1] … [current−1] [current] [current+1] … [N] — both ellipses.Anatomy
Prev / NextIcon-only buttons. Disabled (and non-clickable) on the first and last page respectively.Page buttonGhost style when inactive. Filled (action/primary bg, white text) when current.EllipsisNon-interactive placeholder (…) indicating skipped pages. aria-hidden.Current pagearia-current="page" set on the active button for screen reader announcement.Usage guidance
DoPair with a "Page X of Y" label so users always know their position.DoReset to page 1 when the user changes filters or sort order.DoUse for server-side paginated data. For client-side lists, consider infinite scroll or a Load More button instead.Don'tUse pagination for fewer than 2 pages — hide it entirely.Don'tChange the total page count mid-navigation without resetting to page 1.Tokens used
action/primaryCurrent page button backgroundaction/on-primaryCurrent page button texttext/subtleInactive page numbers and Prev/Next iconstext/baseInactive page hover texttext/disabledPrev (on page 1) / Next (on last page)bg/faintInactive page hover backgroundradius/mdButton corner radius (8px)border-width/baseButton border (transparent by default)space/1Gap between buttons (4px)body/smPage number font size