Progress

Primitive Status and feedback draft Gen UI part

Shows how far along something is, or that the bot is working.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/progress.css and read only tokens. Wrap markup in .v-root.

Rendered markup of the anatomy example

Props and slots

The component API. Gen UI JSON uses these names, and the Flutter widget should mirror them.

Props

Prop	Values	Default
`variant`	bar \| stacked \| ring \| dots \| spinner	bar
`value`	number
`tone`	accent-2 \| accent \| neutral	accent-2
`size`	thin \| md \| thick	md
`label`	string
`segments`	array. [{ value, color: accent \| accent-2 \| accent-dark }] for stacked

* required.

Slot rules

No slots. This part takes no children.

In Gen UI

How VelioBot uses this part. The bot returns JSON; the validator checks it; the renderer draws it.

JSON node

Every node may also carry id, grow, attribution, privateOnly and fallbackText.

Rules that name this part

card-children Card children: Image, Text, Stack, List, KeyValue, Tabs, MapSnippet, Progress, Divider, ActionRow.

bubble A message bubble holds text, or exactly one Card, Carousel or Text (or Progress dots while typing).

Usage in recipes

7 of the original cards use it. After V1. Priority table

Bot functions: Bill split and payments, Bookings, Bot foundation, Learn from chats and posts, Meet new people, Occasions and events, Onboarding and profile, Plan capture, Trips, Trust and vouches.