Pagination
Navigation for paginated data — basic, with first/last, ellipsis, sizes, quick jump, and a simple prev/next pager.
Basic
Numbered pages with prev/next chevrons
With First / Last
Jump to first or last page instantly
Showing records 41–50 of 100
With Ellipsis
Collapses middle pages for large totals
Use the chevrons or click a page number to navigate.
Sizes
sm, md, and lg variants
Quick Jump
Type a page number and press Enter
Useful for tables with hundreds of pages.
Simple Pager
Prev/next only — great for articles & wizards
No page numbers — just forward / back.
Anatomy & Tips
Pagination best practices
When to show
Show pagination only when total items exceed the page size. For ≤20 items, render all.
Ellipsis threshold
Collapse middle pages when total > 7. Always show first, last, and 1 sibling on each side.
Current page
Use aria-current="page" on the active button.
Disabled state
Prev chevron is disabled on page 1; next chevron is disabled on the last page.