Indicators
Indicators helps users navigate between large groups of content
within the same page.
Variants
Page Indicator
| Variant | Usage |
|---|---|
|
Active |
Indicates active/current page |
|
Inactive |
Indicates inactive page |
|
Disabled |
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a |
Anatomy
Indicators are made up of the following:
- Indicator dot: 8px by 8px circle
Size
Page indicators are always 8px by 8px.
Behavior
More than 10 dots are hard to catch at a glance. If your design requires more than 10 dots, consider using a different arrangement. Swipe left and right to move through the options.
Dos and Don'ts
Center the page control at the bottom of a screen or right below a banner. Also allow users to tap on the dots to move from page to page.
Use more than two different indicators images within the same control, color them or display too many indicators (more than 10).