About this block

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.

When to use

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

• A Breadcrumbs row to show which section or filter the results belong to
• A Cards grid displaying the paginated data items above the controls

After

• A Badges group to surface status counts or filter chips alongside the results

What you can customize

Drop this control below any paginated surface and swap out the values to match your data:

• Page count. Add or remove numbered links to reflect the total number of pages in your result set.
• Active state. Mark whichever page number is currently selected as active so users always know where they are in the sequence.
• Navigation targets. Point each link and the chevron buttons at the correct page routes or handler functions for your application.

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.