Rounded Pagination
A pagination row with fully rounded pill buttons for each page. The soft circular shape suits friendly product pages, blogs, and modern marketing layouts.
A pagination row with fully rounded pill buttons for each page. The soft circular shape suits friendly product pages, blogs, and modern marketing layouts.
Search blocks by description or jump to a page.
Rounded Pagination is a single horizontal navigation row. A pill-shaped Previous button sits on the left, followed by individual page number buttons (1, 2, 3), an ellipsis to signal skipped pages, a final visible page number (8), and a pill-shaped Next button on the right. The active page is visually distinct so readers always know where they are in the sequence.
Every element in the row is independent. You can add or remove page number items, change the total shown before the ellipsis, or update the active page marker without affecting the surrounding layout. The Previous and Next controls stand alone and can be relabeled to match your product voice.
Reach for this block when the page context calls for a friendly, open feel rather than a rigid grid or table. It fits a portfolio browsing surface, a blog archive, or an image gallery on a creative agency or studio site where the softer pill shape reinforces the visual language of the rest of the page. Compared to the bordered or shadow variants, this one reads lighter and lets the content stay front and center.
A natural flow around it on a Components page:
Before
After
Swap in whatever page range and active state your data requires. A few other ways to put the frame to work:
Tip: keep the visible page count to three or four numbers before the ellipsis so the row stays compact and does not wrap on small screens.