--- title: Progress Steps description: Progress Steps shows how far someone is through a flow of three to five steps. Appetite UI Figma component: done, current and upcoming markers and tokens. group: Components source: https://www.appetiteui.com/docs/progress-steps dateModified: 2026-10-03 --- # Progress Steps Updated: October 3, 2026. Progress Steps shows how many steps a flow has, and how far through it someone is. ## 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. Specimen: Steps 5, Current 3. 272 x 24, markers 24, connector 2. 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. Specimen: Steps 3, 4 and 5, all at Current 2. the connector takes the difference: 84, 42.667, 22. 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](https://www.appetiteui.com/docs/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. Specimen: Current 1 to 5 at Steps 5. done brand with a check, current outlined, upcoming soft. 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](https://www.appetiteui.com/docs/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. - Avoid: 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.