---
url: /docs/components/page-indicator/usage.md
---
# Page indicator - Usage

A page indicator shows the total amount of pages (or images) and the current page using dots.

## General

Page indicators are usually used in image carousels, and supported by carousel controls that give the user power to navigate through the carousel of images.

**Use page indicators when:**

* You have one or more images, or pages, you want to show, but don’t have space to show them all at once.
* When you want to clearly illustrate how many images, or pages, are available.

**When using page indicators:**

* The number of dots varies depending on the number of pages.
* Although there is no maximum limit to the amount of dots you can use, don’t display too many.
* The aim of page indicators is to give users’ a quick overview of how many pages, or images, there are to be viewed, so using more than 8 dots is too hard to count at a glance.

## Behavior

* Individual indicator dots have two states: active and inactive
* Should only show one active dot at a time
* Should always be centred-aligned at the bottom of the view or window within their parent container (eg. 24px padding between the page indicator and the bottom of the parent container).
* Should not be interactive, meaning they cannot be clicked or used as a shortcut to specific pages/images (so no focus state is necessary).
* Have varying number of dots depending on the number of pages.
* Center a page control at the bottom of the view or window. To ensure people always know where to find a page control, centre it horizontally and position it near the bottom of the view.

## Placement

## Resizing

The width is automatically adjusted according to the numbers of dots.
The height of the component is fixed and should not be changed.