Photonix UI - React Components, Templates & Figma Design System

PaginationDot

Dot indicators for carousels or steps.

Usage

import { PaginationDot } from '@photonix/ultimate';

<PaginationDot count={5} activeIndex={0} onDotClick={(idx) => console.log(idx)} />

Prop	Type	Default	Description
count	`number`	`-`	Total number of dots (pages).
activeIndex	`number`	`-`	Current active index (0-based).
onDotClick	`((index: number) => void)`	`-`	Callback when a dot is clicked.
variant	`"static" \| "dynamic"`	`'static'`	Visual variant. 'static' for uniform dots, 'dynamic' for scaling dots.
className	`string`	`-`	Custom class name.
style	`React.CSSProperties`	`-`	Custom styles.
size	`number`	`-`	Size of the dots in px (default is defined in CSS, usually 8px).