Compact Pagination
A tight pagination row that fits page numbers, prev, and next into a small footprint. Good for sidebars, panels, and dense admin tables with limited space.
A tight pagination row that fits page numbers, prev, and next into a small footprint. Good for sidebars, panels, and dense admin tables with limited space.
Search blocks by description or jump to a page.
Compact Pagination is a tight horizontal row of controls. A left chevron sits at one end, a right chevron at the other, and five numbered page links fill the space between them. Every control shares the same small square footprint, and the active page is visually distinguished so a reader knows their position without scanning.
Because every element is the same size, the row fits naturally into constrained spaces like sidebars, panel footers, and dense data tables. The page count, the active page index, and the link targets are all independent so you can adjust any of them without affecting the others.
Reach for this block in a product analytics dashboard where screen real estate is split across charts, metric cards, and filter panels. When a paginated results table lives inside a panel that shares the viewport with other data, a full-width pagination row would dominate the footer. This compact layout keeps navigation present without competing with the surrounding content.
A natural flow around it on a Components page:
Before
After
Drop this control below any paginated surface and swap out the values to match your data:
Tip: if your result set can grow beyond ten pages, pair this block with a Mini Pagination variant that shows only the current page and step arrows to avoid the row overflowing its container.