Dot Indicator Pagination
Pagination shown as a row of dots, with the active page filled. Ideal for image carousels, onboarding steps, and short sequences where numbers feel heavy.
Pagination shown as a row of dots, with the active page filled. Ideal for image carousels, onboarding steps, and short sequences where numbers feel heavy.
Search blocks by description or jump to a page.
Dot Indicator Pagination centers a compact row of five circular dots between a left chevron and a right chevron. Each dot is a small filled circle, and the active page is rendered in the primary color while the remaining dots use a muted fill. Screen readers receive the page number through a visually hidden label on every dot, so the control is fully accessible despite showing no visible numerals.
The left and right chevrons are icon buttons that sit flush with the dot row. The dots and arrows are all independently linked, so you can adjust the total count, move the active marker to any position, or swap the chevron icons without touching the surrounding layout.
This layout fits anywhere that page numbers would feel too heavy for the space. On an ecommerce storefront it suits product image carousels, a short "featured collections" slider, or an onboarding sequence where showing step one of five is more useful than showing "2 / 5" in text. It also works well below a lookbook grid or a row of featured items where the control should stay visually quiet.
A natural flow around it on a Components page:
Before
After
Replace or extend the five dots to match the real length of your sequence:
isActive to
reflect the current page or step without changing anything else.Tip: keep the dot count to seven or fewer so the row stays narrow enough to center comfortably on small mobile screens.