Metric Components
Add countdown timers, progress bars, and step indicators.
Metric Components
Metric components communicate progress, urgency, and status to users. Use them to drive action with countdown timers, show how far along a user is with progress bars, or indicate which step of a multi-screen flow they are on.
Countdown Timer
A timer that counts down to a target time, creating urgency for time-sensitive promotions, limited offers, or onboarding deadlines.
Properties
| Property | Type | Description |
|---|---|---|
| Target Date | text | The date/time the countdown reaches zero. |
| Duration | number | Alternative to target date: countdown from a fixed number of seconds. |
| Format | select | Display format: days/hours/minutes/seconds, or a subset. |
| Show Labels | boolean | Display unit labels (e.g., "hours", "min", "sec"). |
| Label Text | text | Custom unit labels. Localizable. |
| Separator | text | Character between time units (e.g., ":" or " "). |
| Font Size | number | Digit font size. |
| Font Family | font | Typeface for the timer. |
| Font Weight | select | Digit font weight. |
| Text Color | color | Timer text color. |
| Background Color | color | Background behind each digit group. |
| Border Radius | number | Corner rounding for digit backgrounds. |
| Padding | spacing | Internal spacing. |
| Completed Text | text | Text shown when the timer reaches zero. Localizable. |
Use cases
- Limited-time discount offers
- Trial expiration reminders
- Event or launch countdowns
- Session timeouts with visual urgency
Countdown timers continue to tick in real time on the device. If the user backgrounds and returns to your app, the timer syncs to the correct remaining time.
Progress Bar
A horizontal bar that fills to indicate progress toward a goal. Progress bars are effective for showing completion status, usage levels, or step advancement.
Properties
| Property | Type | Description |
|---|---|---|
| Value | number | Current progress value. |
| Max Value | number | Maximum value (100% fill). Default: 100. |
| Show Label | boolean | Display the percentage or value text. |
| Label Format | select | "percentage" or "value" (e.g., "75%" vs "15/20"). |
| Height | number | Bar height in pixels. |
| Track Color | color | Background track color (unfilled portion). |
| Fill Color | color | Filled portion color. |
| Border Radius | number | Corner rounding for the bar. |
| Animated | boolean | Animate the fill when the value changes. |
| Width | size | Bar width. Default: 100%. |
Variable bindings
The progress value supports variable bindings, so you can display real user data:
- Profile completion percentage from a user attribute
- Usage quota consumed this billing period
- Onboarding steps completed
Progress Indicator
A step/page indicator that shows which screen the user is on within a multi-screen flow. This component is essential for onboarding flows and surveys where users need to understand how many steps remain.
Properties
| Property | Type | Description |
|---|---|---|
| Total Steps | number | Total number of steps/screens in the sequence. |
| Current Step | number | The currently active step (1-based). |
| Style | select | Visual style: dots, bars, numbers. |
| Active Color | color | Color of the current step indicator. |
| Inactive Color | color | Color of remaining step indicators. |
| Completed Color | color | Color of completed step indicators. |
| Size | number | Indicator element size. |
| Gap | number | Spacing between indicator elements. |
Automatic step tracking
When placed in a flow, the progress indicator can automatically track the current screen position. The currentStep value updates as users navigate between screens, so you do not need to manually set it for each screen.
Use cases
- Onboarding flow step tracker (e.g., "Step 2 of 5")
- Survey progress indication
- Multi-page form completion status