Pagination

‍Best Practices

Stick to sequential lists. Page controls are best suited for simple, ordered navigation. If your content is hierarchical or non-linear, consider using a sidebar, split view, or another pattern that fits those relationships more naturally.

Limit the number of pages. Although page controls can represent many pages, displaying more than about 10 dots can be visually overwhelming. If you must exceed that number, consider alternative layouts — like grids or lists — that help people navigate more freely.

Center the control. Position the control near the bottom of the screen and center it horizontally so that users can reliably find it in the same spot, regardless of the current page.

Style

Indicator Dots. By default, page controls use small circular dots for each page. The current page’s dot often appears filled or highlighted, while the remaining dots appear inactive. If there are more dots than can fit on screen, they may shrink or be clipped to suggest additional pages exist.

Custom Images. You can replace the default dot image with a custom symbol or icon if it adds clarity, but avoid using more than two different images in a single control. Multiple icon types can create visual noise and force people to memorize each shape’s meaning.

Background Styles. Page controls can display a translucent backdrop that becomes visible during interactions, remain always visible for a more prominent look, or never display a background for a minimal appearance. If you plan to support scrubbing (continuous dragging to jump between pages), using either an “automatic” or “prominent” background style can provide helpful visual feedback.

Content

Concise Indicators. Each dot represents a distinct page. Keep any custom symbols simple, avoiding intricate details or text that can blur at small sizes.

Avoid Coloring Icons. Let the system handle coloring to ensure consistency and adequate contrast between the active and inactive states. Overly colorful indicators can reduce visibility or clash with your app’s interface.

States. When a page is selected, highlight its indicator distinctly (for example, fill the dot). If a page is unavailable or doesn’t exist, the corresponding indicator should remain hidden or inactive.

Role

Navigational Aid. Page controls give people a quick way to gauge how many screens are available and which one they’re viewing. Tapping a dot typically jumps to that specific page, while scrubbing (dragging left or right) scrolls through pages in sequence.

Focus on Simplicity. Use page controls primarily for horizontally paged content (e.g., image carousels, onboarding flows, or multiple dashboards). If your content structure grows too large or complex, consider other navigation elements that afford more flexible exploration.

Performance and Feedback. Avoid animating every single page transition during fast scrubbing to prevent lag or flicker. Reserve smooth scrolling animations for discrete taps, giving users a seamless experience without visual overload.