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