Bordered Pagination
A pagination row where each page number sits inside its own outlined button. The clear borders separate pages cleanly across data tables and search results.
A pagination row where each page number sits inside its own outlined button. The clear borders separate pages cleanly across data tables and search results.
Search blocks by description or jump to a page.
Bordered Pagination is a horizontal row of outlined navigation controls. A Previous button sits on the left, followed by individual page number buttons and an ellipsis separator, then a Next button on the right. Every control shares the same two-pixel border treatment, and the active page swaps to a primary-colored border and label so the current position is immediately obvious. Hovering any idle button shifts its border to the primary color, giving a clear interactive signal without filling the button.
The row has no surrounding container, so it slots cleanly into a table footer, a search results page, or any surface that already provides its own card or panel. The page numbers, the ellipsis position, and the total count are all yours to adjust. You can show more or fewer numbered steps, move the ellipsis, or remove it entirely for short result sets.
This layout works well wherever a property search or listing grid needs clean, scannable navigation at the foot of results. On a real estate marketplace, buyers page through dozens of property listings and the distinct borders help each step read as a tappable target without crowding the layout. It is a better fit than dot or icon-only variants when the total page count matters to the user, and it is less heavy than a card wrapper when the surrounding page already has strong visual structure.
A natural flow around it on a Components page:
Before
After
Each element in the row is an independent link, so you can rework the set to match your data:
Tip: on dense property search pages, pair this block with a per-page selector above it so users can expand results before paging forward.