Step Dots

Tiny dot/bar indicators showing position in an onboarding flow or carousel. Lightweight alternative to the full Stepper.

Basic Usage

Simple progress dots

Tiny indicator showing position in an onboarding or carousel. Tap the buttons to step through.

import { StepDots } from 'fluxo-ui';

<StepDots count={4} activeIndex={index} />

Variants

Dot (default)

Active dot stretches into a pill.

Bar

Horizontal bars — works well with edge-to-edge carousels.

Pill

All completed/active dots fill — minimal animation.

Numbered

Each step shows its number — for guided wizards.

<StepDots variant="bar" count={5} activeIndex={2} />

Sizes

Three sizes

Default sizes scale all variants. 'sm' fits inline with text, 'lg' is suitable for hero carousels.

<StepDots size="sm" count={5} activeIndex={2} />
<StepDots size="md" count={5} activeIndex={2} />
<StepDots size="lg" count={5} activeIndex={2} />

Interactive

Add interactive to make dots focusable and clickable. Arrow keys navigate the active dot.

Current: step 1 of 5

<StepDots count={5} activeIndex={i} onChange={setI} interactive />

Import

import { StepDots } from 'fluxo-ui';
import type { StepDotsProps, StepDotsVariant, StepDotsSize } from 'fluxo-ui';

Props

PropertyTypeDefaultDescription

countreq

number

—

Total number of steps.

countreq

number

Total number of steps.

activeIndexreq

number

—

Zero-based index of the currently active step.

activeIndexreq

number

Zero-based index of the currently active step.

onChange

(index: number) => void

—

Called when the user activates a dot (only when interactive=true).

onChange

(index: number) => void

Called when the user activates a dot (only when interactive=true).

variant

'dot' | 'bar' | 'pill' | 'numbered'

"'dot'"

Visual style. 'dot' grows the active dot into a pill, 'bar' uses horizontal bars, 'pill' fills completed/active dots, 'numbered' shows step numbers.

variant

'dot' | 'bar' | 'pill' | 'numbered'"'dot'"

Visual style. 'dot' grows the active dot into a pill, 'bar' uses horizontal bars, 'pill' fills completed/active dots, 'numbered' shows step numbers.

size

'sm' | 'md' | 'lg'

"'md'"

Size of the dots.

size

'sm' | 'md' | 'lg'"'md'"

Size of the dots.

color

string

—

Override color for the active dot.

color

string

Override color for the active dot.

inactiveColor

string

—

Override color for inactive dots.

inactiveColor

string

Override color for inactive dots.

interactive

boolean

"false"

Allow keyboard/click activation of dots.

interactive

boolean"false"

Allow keyboard/click activation of dots.

showLabels

boolean

"false"

Add visually-hidden labels for screen readers (always on for numbered variant via aria-label).

showLabels

boolean"false"

Add visually-hidden labels for screen readers (always on for numbered variant via aria-label).

labelFormatter

(index: number, total: number) => string

—

Custom label formatter for each dot's accessible name.

labelFormatter

(index: number, total: number) => string

Custom label formatter for each dot's accessible name.

className

string

—

Additional CSS class for the wrapper.

className

string

Additional CSS class for the wrapper.

ariaLabel

string

"'Step progress'"

Accessible name for the tablist.

ariaLabel

string"'Step progress'"

Accessible name for the tablist.

Features

Four variants

Dot (stretching pill), bar, pill, and numbered styles.

Three sizes

sm / md / lg scale the whole indicator group.

Interactive mode

Add interactive to make dots focusable and clickable.

ARIA tablist

role="tablist" with aria-current="step" for assistive tech.

Reduced motion

Animations disable themselves under prefers-reduced-motion.

Theme-driven

Active color uses --eui-primary; works in every theme + dark mode.