Banner
Composite Status and feedback draft Gen UI partA one-line notice with up to 2 buttons. Consent prompts, nudges.
Examples
HTML and CSS
Framework-free reference. Styles live in system/components/banner.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 |
|---|---|---|
text * | string | |
icon | add | alert | arrow-left | arrow-right | arrow-up | bell | calendar | card | chat-add | chat | check-sweep-clean | check | chevron-down | chevron-right | clock | delete-x-circle | delete-x | edit | gift | globe | home | info | lock | mail | mic | more | phone | pin | qr | receipt | search | send | shield-check | shield | sparkle | star | sun | trash | undo | upload | users-add | users | utensils | |
dot | boolean | |
tone | accent | sage | inverse | accent |
shape | pill | rect | pill |
* required.
Slot rules
children: Button.
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
No part-specific rules. The structure and behaviour rules still apply.
Usage in recipes
1 of the original cards use it. After V1. Priority table
Bot functions: Video calls with notes, Voice calls with notes.