order_tracker
A step timeline with done, current and pending.
Where something has got to. order_tracker draws two to eight named steps with a status each, so "where is my order" is answered by a shape rather than a sentence.
It is not delivery-specific. A return, an application, a repair and an onboarding all have the same structure.
- Ordered22 Aug, 09:14
- Packed in Rotterdam23 Aug, 17:02
- Out for delivery26 Aug, 07:40
- Delivered
Re-rendered in the browser from the SDK’s own scales. Not a screenshot.
Rendered natively by the Flutter SDK and the Web SDK, both since 0.1.0.
When not to use it
Do not use it for a percentage. A tracker names its steps; progress is the block for a proportion.
Do not use it for things the user has to do, either. Steps here are states the system reports, not tasks: a list of actions is item_list or quick_replies.
Props
Every block also carries type and a required fallback_text of 1 to 300 characters.
| Prop | Type | Required | Constraints |
|---|---|---|---|
title | string | No | Up to 120 characters. |
steps | array | Yes | 2 to 8 entries. One step is not a timeline. |
steps[].label | string | Yes | 1 to 80 characters. |
steps[].status | done | current | pending | Yes | None |
steps[].timestamp | string | No | Up to 40 characters. Formatted by you. |
On the wire
{
"id": "blk_08",
"type": "order_tracker",
"fallback_text": "Order 1042 is out for delivery, packed on 23 August.",
"props": {
"title": "Order 1042",
"steps": [
{
"label": "Ordered",
"status": "done",
"timestamp": "22 Aug, 09:14"
},
{
"label": "Packed in Rotterdam",
"status": "done",
"timestamp": "23 Aug, 17:02"
},
{
"label": "Out for delivery",
"status": "current",
"timestamp": "26 Aug, 07:40"
},
{
"label": "Delivered",
"status": "pending"
}
]
}
}Interaction
None. The tracker is a readout and has no interactive props.
States
| State | What the SDK draws |
|---|---|
| Loading | Three dot-and-label placeholder rows. |
| Empty | An empty steps array renders fallback_text inside the plate. |
| All pending | Every dot is an open ring and the connector stays at hairline weight. Nothing is marked current that is not. |
| No current step | Perfectly legal: a finished timeline is all done, and a cancelled one may have none. |
Accessibility
All three states are drawn in ink: a timeline is a readout, and the accent is reserved for what the reader can act on. The step you are waiting on is marked structurally instead, by a halo of the plate around a filled dot, so "here" survives the block being monochrome. Done steps are filled, pending ones are open rings.
Each step announces its label, its timestamp and its state in words ("Out for delivery, 26 Aug 07:40, in progress"), because the dot that carries the state visually carries nothing to a screen reader.
fallback_text should name the current step, since that is the answer to the question that produced the block.