Media Dots

Page-indicator dots for the product media gallery.

Last updated

August 14, 2026

How to use

Place it near the product media gallery and connect ⛁ Butter Data to the product's Butter Data CMS field.
Use Layout to set direction (horizontal or vertical), alignment, gap, and padding for the dot strip.
Style the Inactive, Hover, and Active dots — each gets its own width, height, color, and radius.
Optionally set Single Page to Hide so the dots disappear when there's only one media item.

Every dot is a click target

One dot renders per visible media item in the shared gallery, and each is clickable — clicking a dot jumps straight to that media item. The active dot tracks the gallery's current position automatically as the customer swipes, clicks a Media Controls arrow, or drags the Media Scrollbar.

Inactive, hover, and active — three independently styled states

Inactive, Hover, and Active are each their own set of controls — width, height, color, and radius — so a dot can, for example, grow and change color only once it's current, with a distinct in-between look on hover.

Staying in sync, and what you'll see before connecting data

Media Dots reads the same shared gallery position as Media Controls, the Media Slideshow, Media Counter, and Media Scrollbar, so it always matches the rest of the gallery. On the Framer canvas, before ⛁ Butter Data is connected, it shows a 5-dot preview with the first dot active, so you can style all three states without live data.