Feedback

Stepper

View in Figma

Vertical process tracker that stacks step rows, each pairing a status indicator and connector line with a title and description.

Overview

Vertical process tracker that stacks step rows, each pairing a status indicator and connector line with a title and description.

Account verified
Identity confirmed successfully.
Deposit pending
Once your friend makes a deposit, we’ll start processing it.
Reward unlocked
Your cash bonus lands within 1 to 3 business days.

Anatomy

Stepper
Deposit pending
Once your friend makes a deposit, we’ll start processing it.
  1. 1Step  required  Repeated row. Two to seven steps per stepper.
  2. 2indicator  required  40pt StepIndicator status icon. Default shows three dots, waiting a clock, finished a checkmark.
  3. 3connector  optional  StepLine below the indicator. Dashed while upcoming, solid once finished. Hidden on the last step.
  4. 4title  required  Label.Title inside Container.Content. Body medium semibold.
  5. 5description  optional  Label.Description inside Container.Content. Label medium regular.

Measurements

Deposit pending
Once your friend makes a deposit, we’ll start processing it.
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Indicator
Default step indicator icon
colorContentTertiary
#8E959D
Waiting step indicator icon
colorBackgroundAccentSecondary
#7D44C1
Finished step indicator icon
colorBackgroundAccentPrimary
#4B56C7
Indicator to content gap
spacingGapPositive2xl
16pt
Connector
Upcoming connector line
colorContentTertiary
#8E959D
Finished connector line
colorContentAccent
#4B56C7
Connector line width
strokeXl
2pt
Connector line vertical inset
spacingGapPositiveMd
8pt
Content bottom padding between steps
spacingPadding4xl
40pt
Content
Title and description text
colorContentPrimary
#0C1828
Title typography
body.md.semibold
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 600 · typographyFontWeightSemiboldTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Description typography
label.md.regular
Size 12px · typographyFontSizeLabelMdLine height 16px · typographyLineHeightLabelMdWeight 400 · typographyFontWeightRegularTracking 0px · typographyTrackingLabelMdParagraph spacing 0px · typographyParagraphSpacingLabelMdFamily SF Pro Text · typographyFontFamilyText
Title to description gap
spacingGapPositiveXs
4pt

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
RootslotSlot

Accessibility

Announce the current step and the total to assistive technology (for example "Step 2 of 3, in progress"). Do not rely on the check, clock, or dot icons alone; back each state with text.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.