Bottom sheet

Container Overlays draft Gen UI part

A modal over the chat. Every mini app and every confirm step opens in one. Close is always an X at the bottom: centred when there is no action, to the left of the primary action when there is.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/bottom-sheet.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
`title`	string
`progress`	number
`closeAction`	string

* required.

Slot rules

children: Section, List, KeyValue, TextField, ActionRow. ActionRow is last and holds only the primary action(s). The close X is added by the sheet; never add Cancel, Keep or Keep browsing buttons.

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

sheet-children Bottom sheet children: Section, List, KeyValue, TextField, ActionRow.

confirm Actions of type pay, book, transfer or delete route through a confirm Bottom sheet.

Usage in recipes

7 of the original cards use it. Needed for V1. Priority table

Bot functions: All functions, Bill split and payments, Bookings, Meet new people, More booking, Occasions and events, Trips.