Pagination Indicator

The Pagination Indicator component shows how many pages there are. It also shows which page is active.

Usage

import { PaginationIndicator } from '@amazon-devices/kepler-ui-components';

<PaginationIndicator
  activePage={3}
  numberOfPages={6}
  activeColor={'#FF12FF'}
  inactiveColor={'#FAFAFA'}
  size='md'
 />

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

To customize the indicator, use the activeColor, inactiveColor, size, and vertical props.