Metric Components
Add countdown timers and step indicators to your flows.
Metric Components
Metric components communicate progress, urgency, and status. Use a countdown timer to create urgency around a time-sensitive offer, and a progress indicator to show users where they are in a multi-screen flow.
Countdown Timer
A timer that counts down to a deadline, creating urgency for limited offers or onboarding windows.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Label | text | -- | Optional label shown above the timer. |
| Mode | select | duration | duration counts down a fixed number of seconds. targetDate counts to a date. |
| Duration | number | 300 | Seconds to count down. Used when Mode is duration. |
| Target Date | text | -- | The deadline to count to. Used when Mode is targetDate. |
| Expired Text | text | Offer expired | Shown once the timer reaches zero. |
| Style | select | boxes | boxes, inline, or flip (flip-clock style). |
| Show Days | boolean | true | Include the days unit. |
| Show Hours | boolean | true | Include the hours unit. |
| Show Minutes | boolean | true | Include the minutes unit. |
| Show Seconds | boolean | true | Include the seconds unit. |
| Number Color | color | #000000 | Color of the digits. |
| Label Color | color | #6B7280 | Color of the unit labels. |
| Background Color | color | -- | Background behind each digit group. |
| Alignment | select | center | left, center, or right. |
| On Expire | action | -- | Action to run when the timer reaches zero. |
| Margin | spacing | bottom 16 | Outer spacing. |
Pick the mode that matches your intent. targetDate counts to a fixed moment, so every user sees the same deadline
and the timer stays correct after the app is backgrounded. duration counts a fixed span from when the screen
appears, so the deadline is personal to each user.
Use cases
- Limited-time discount on a paywall screen.
- A trial-ending reminder counting to the exact expiry date.
- A flash-sale banner that swaps to expired copy when it ends.
Progress Indicator
Shows how far along the user is in a multi-screen flow. Use it on onboarding and quiz flows so people can see how much is left.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Style | select | dash | dash, dot, line, bar, segmented, circular, or steps. |
| Total Steps | number | 3 | How many steps the indicator represents. |
| Current Step | number | 0 | The active step, counting from 0. |
| Show Step Numbers | boolean | false | Display the step number alongside the indicator. |
| Active Color | color | #5F5F5F | Color of completed and current steps. |
| Inactive Color | color | #DADADA | Color of remaining steps. |
| Width | number | 44 | Width of each indicator element. |
| Height | number | 6 | Height of each indicator element. |
| Gap | number | 8 | Spacing between elements. |
| Border Radius | number | 3 | Corner rounding of each element. |
| Alignment | select | center | left, center, or right. |
| Margin | spacing | 0 | Outer spacing. |
| Padding | spacing | 0 | Inner spacing. |
Setgreet fills in the position automatically. When a flow is served, Total Steps and Current Step are rewritten to match the screen's real place in the flow, including branching paths, so you do not have to update the numbers on every screen by hand.
Use cases
- A dash or dot indicator across an onboarding sequence.
- A
stepsindicator on a multi-part form so users can see what remains. - A
circularindicator on a compact screen where a full-width bar would not fit.