Chip

Primitive Actions draft Gen UI part Needs action

A compact choice. Choice picks one in a group, filter toggles, suggestion is a reply the user can tap.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/chip.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
`variant`	choice \| filter \| suggestion	choice
`selected`	boolean
`size`	sm \| md	md
`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
`avatar`	part
`group`	string
`disabled`	boolean
`action *`	string. Action name, e.g. "plan.open" or "pay.share". The part before the dot is the action type.
`payload`	object

* required.

Slot rules

avatar: Avatar.

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. Interactive: the node must carry an action, and taps emit { action, payload }.

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.

chips-max At most 6 chips in a row.

Usage in recipes

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

Bot functions: Bill split and payments, Bookings, Group plans, Learn from chats and posts, Meet new people, More booking, Occasions and events, Onboarding and profile, Plan capture, Plan day and live ETA, Suggestions, Trips, Trust and vouches, Voice calls with notes.