Updated
Progress Steps
Progress Steps shows how many steps a flow has, and how far through it someone is.
Updated
Preview
Where you are in a sequence with a known end. Checkout, onboarding, a form in parts. Done steps carry a check, the current one is outlined with its number, the rest wait.
A done step is brand blue with a white check, and the current step is a white circle with a 2 brand outline and a brand number. Upcoming steps sit on bg/soft-100 with their number in text/disabled-400.
Source: Progress Steps on the Progress Steps page of the Appetite UI Figma file, read on October 2, 2026.
How many steps can Progress Steps show?
Three, four or five steps. Five is the cap and the file has no sixth.
The row is 272 wide at every count, so only the connector moves: 84 at three steps, 42.667 at four, 22 at five. A sixth step would shrink each connector to 9.6 and the row would read as a dotted line.
For more than five, use a Progress Bar with a step counter in text.
Progression
The same five steps at each position. The check replaces the number the moment a step is behind you.
The connector into the current marker is already brand blue, so the line marks the step you are on as well as the ones behind you. There is no all-done state: at Current 5 the fifth marker is still the outlined current one, so a finished checkout needs a confirmation on screen to say so.
Properties
Two axes, no text, no icons, no slots.
| Property | Type | Default |
|---|---|---|
Steps | 3, 4, 5 | 3 |
Current | 1, 2, 3, 4, 5 | 1 |
| Set | Variants | Size |
|---|---|---|
Progress Steps | 12, Steps crossed with Current | 272 x 24, in all twelve |
The grid is triangular: Current cannot be higher than Steps, so three of the fifteen combinations do not exist. The numbers inside the markers are plain text with no property on them, so a flow that does not start at 1 is an override on the instance.
Tokens
Five values. Brand does three jobs, and no state color is read.
| Token | Light | Dark | Applied to |
|---|---|---|---|
brand/base | #155DFC | #2B7FFF | Done marker, current outline and number, connectors left of the current marker |
icon/on-color | #FFFFFF | #FFFFFF | Check on the done marker |
bg/white-0 | #FFFFFF | #0E0E0F | Current marker fill |
bg/soft-100 | #E9E9EA | #48484A | Upcoming markers, connectors ahead |
text/disabled-400 | #AEAEB2 | #8E8E93 | Upcoming numbers |
The marker radius is dimensions/radius/full.
How does Progress Steps differ from the iOS Stepper and Material 3?
A Stepper changes a number and Progress Steps shows how far through a flow someone is. Neither iOS nor the Material 3 pages of the file draw a step indicator.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Progress Steps | None for a flow. iOS / Stepper in the Apple pages (SwiftUI Stepper, UIKit UIStepper) increments a value, and iOS / Page Control marks a page in a carousel. | None. The file draws no Material 3 stepper or progress indicator. | Appetite UI draws three to five numbered circles joined by a 2 rule, 272 wide, with a check on finished steps. The component that matches the iOS Stepper is Counter Input on the Input page. |
The markers are display only. If a step can be tapped, wrap it in a control with a hit area of at least 44 pt on iOS or 48 dp on Android, the value of platform/min-touch-target in the Platform collection, because the marker itself is only 24.
Guidelines
Do
Five is the ceiling. At five the connector is still 22 wide and the row reads as a path from one circle to the next.
Don't
Do not add a sixth. The row stays 272, so every connector drops to 9.6 and the path turns into dashes between dots.
Use it when the number of steps is known before the user starts and will not change inside the flow: checkout, onboarding, a form split into parts. Decide the count before you show the first step.
The circles are a picture of the position. Say it in text as well, for example a heading "Step 3 of 5", and mark the current step in code so VoiceOver and TalkBack read the position.
Upcoming numbers use the disabled text color, which has no contrast minimum, so the text must carry what comes next.