Pagination Indicator
Open Beta Documentation Amazon offers this technical
documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback
and iterates on the features. For the most current feature information, see the latest Release
Notes.
The Pagination Indicator component provide a visual indicator for the number of pages and the current active page.
Usage
Import
import { PaginationIndicator } from '@amazon-devices/kepler-ui-components';
Example
<PaginationIndicator
activePage={3}
numberOfPages={6}
activeColor={'#FF12FF'}
inactiveColor={'#FAFAFA'}
size='md'
/>
Props
| Prop | Type | Default Value | Required | Description |
|---|---|---|---|---|
numberOfPages |
Number | N/A | Yes | Total number of pages |
activePage |
Number | N/A | Yes | Currently active page (0 based) |
size |
'sm', 'md', 'lg' | 'md' | No | Size of the PaginationIndicator |
activeColor |
ColorValue |
Undefined | No | Color of the active indicator |
inactiveColor |
ColorValue |
Undefined | No | Color of the inactive indicator |
vertical? |
Boolean | False | No | Set orientation to vertical |
Customization
The active or inactive Color provides customization along with option of size.
Interactivity
| Modality | Available |
|---|---|
| D-pad | No |
| Touch | No |
| Voice | No |
Accessibility
| Prop | Available |
|---|---|
accessible |
No |
accessibilityRole |
No |
accessibilityLabel |
No |
accessibilityValue |
No |
accessibilityActions |
No |
accessibilityState |
No |
UI experience
Last updated: Jun 09, 2026
