Feedback & status

Badge (badge)

A small colored label — Active, Draft, Overdue.

Property	What it does
Text	The label.
Tone	Semantic shade: info, success, warning, risk, neutral.
Pill	Fully rounded corners.
Variant expression / Icon expression	Drive the look from data — e.g. value overdue → risk tone.
Link URL	Make the badge clickable.

Message card (messageCard)

A highlighted box with icon, title, and text — for inline notices ("Your application is being reviewed").

Property	What it does
Title / Description text	The heading and extended content.
Variant	info, success, warning, error.
Show icon / Icon	The leading icon.
Dismissible	The user can close the card manually.
Primary / Secondary button text	Optional CTA buttons (wire them with actions).

Combine with visibleIf to show it only in the relevant state:

visibleIf: {status} == "rejected"

Toast (toast)

A temporary notification. Usually you don't place this element — toasts are shown by actions (showToastAfter or a toast action). Place a Toast element only when you need a persistent, configured message area.

Property	What it does
Title / Description text	The message.
Variant / Position	Type and screen corner.
Auto hide + Auto hide timeout (ms)	Self-dismissal, e.g. 4000.

Stats card (statsCard)

A KPI tile: big number, label, and optional trend. Feed the value with an expression or a data source. Great in dashboard rows.

Property	What it does
Value text	The primary displayed value. Expression example: countInArray({orders}, "id").
Trend direction	up, down, or neutral.
Trend text	Short change explanation next to the indicator.
Trend direction expression / Variant expression / Icon expression	Drive trend, tone, and icon from data.

Progress bar (progressBar)

A completion indicator. Value 0–100 from a fixed number or expression:

Expression: len({completedSteps}) / 5 * 100

Property	What it does
Display type	Horizontal bar or circular indicator.
Value label mode	Show a percentage, the raw value, or current/max.

Stepper / Timeline (progressFlow)

Step indicator with named stages (Submitted → Reviewed → Approved).

Each item in the Items list has:

Item field	What it does
Step / Label / Description	The stage identity and texts.
Visible if	Hide a stage conditionally.
Active if / Completed if / Disabled if	Conditions driving each state, e.g. {el1} == 1 or {score} > 80.

Element-level properties:

Property	What it does
Active index	Default active step.
Active step expression	Calculate the active step from data — for business conditions across several fields.
Active step data path	Read the active index from external state.
Steps data path	Load the step list from data or a source response (data.steps).
Show numbers / Show connector	Numbering and the connecting line.
Allow manual navigation	Users can click between steps themselves.
Step template / Step template ref	Fully custom step markup — inline or from the template library.

The current step is readable in expressions:

{approvalFlow.selectedStep}        → active step name
{approvalFlow.selectedStepIndex}   → active step index

Example: visibleIf: {approvalFlow.selectedStep} == "Approved" on a download button.