Dot Stepper

A row of dots marking where you are in a short sequence: the current step in #005cf8, the rest in #f2f2f2. Two sizes, two to four dots; the controls that move between steps sit beside it.

Welcome aboard

A short tour of the four things you will use every day.

Step 1 of 4
Step 2 of 4
Step 3 of 4
Step 4 of 4

import { StepIndicator } from '@orvain/react';
 
<StepIndicator
  variant="dot"
  size="sm"
  activeStep={1}
  steps={[
    { label: 'Account' },
    { label: 'Profile' },
    { label: 'Plan' },
    { label: 'Review' },
  ]}
/>
 
// Clickable dots
<StepIndicator variant="dot" activeStep={step} onStepClick={setStep} steps={steps} />

Add a small Orvain Dot Stepper with 4 dots, the first active, under the title “Welcome aboard” and the line “A short tour of the four things you will use every day.”, with “Back” and “Next” buttons below.

Orvain MCPIncluded with the library

When to use#

For two to four steps viewed in order: an onboarding tour, a carousel of tips, a short setup.
When position matters more than step names.

When not to use

Use a labelled stepper for a form where each step needs a visible name.
Use Pagination for many pages of results.

Anatomy#

1Dots

Small: 8px dots, 10 apart. X-Small: 4px dots, 6 apart. Fully round.

2Current dot

Brand #005cf8; it changes colour only, never size.

3Controls

Back and Next (or swipe) beside the dots move the step; the dots themselves only show it.

States#

1st to 4th Active

Which dot is current.

Size

Small (62 wide for four) or X-Small (34).

Dots

Two, three or four steps.

Source#

Preview – final code pending

The Dot Stepper is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

onboarding tours carousels