Badge

Primitive Status and feedback draft Gen UI part

A status pill. Read-only; it never takes an action.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/badge.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
`label *`	string
`tone`	neutral \| pending \| success \| strong \| warning \| danger \| outline \| live \| trust	neutral
`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
`size`	sm \| md	md

* 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

listitem-trailing List item trailing: Text, Amount, Time, Badge, an icon, text or small secondary/tonal Button, Toggle, Checkbox, Chip, Icon, Avatar.

Usage in recipes

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

Bot functions: Bill split and payments, Bookings, Calendar and itinerary, Community and PopTonight picks, Friend catchups, Friends nearby, Group plans, Meet new people, More booking, Occasions and events, Plan capture, Plan day and live ETA, Suggestions, Trips, Video calls with notes, Voice calls with notes.