Page Indicator - Flowboard

What it is

Page Indicator shows where the user is inside a multi-page slider.

What it’s best for

Use it when users should understand how many pages exist and where they are in the sequence.

When to use it

Multi-step onboarding
Swipeable product tours
Testimonial carousels
Story-style pricing or feature sequences

When not to use it

Do not use it without a Slider.
Do not rely on it as the only form of guidance if the flow is complex. Pair it with clear copy and layout.

How to add it in the dashboard

Open the screen that contains the slider.
Add Page Indicator from the Components panel.
Select it on the canvas.
In the properties panel, link it to the slider and adjust size, spacing, color, and alignment.
Review the full screen to make sure progress feels visible but not distracting.

Key parameters

Parameter	What it changes	When to adjust it
Linked slider	Connects the indicator to the correct slider	Set it whenever the screen has more than one slider
Dot size	Changes how large each progress dot appears	Increase it when the indicator needs more presence
Spacing	Controls the gap between dots	Use it to keep the indicator balanced and legible
Active color	Highlights the current page	Choose a clear, noticeable color
Inactive color	Styles the non-current pages	Keep it quieter than the active state
Alignment	Places the indicator left, center, or right	Match it to the screen layout and CTA placement

Example use cases

Show three-step progress during a product onboarding carousel
Reinforce that a feature tour has more pages to explore
Add orientation to a swipeable paywall story

Best practices

Keep the active state easy to spot at a glance.
Place the indicator where it supports the reading flow.
Use it whenever multiple pages are part of one connected story.

Common mistakes

Forgetting to connect it to the right slider
Making the dots so small that progress is hard to read
Hiding it in a visually busy area of the screen

Loader Radar Chart