Button

Primitive Actions draft Gen UI part Needs action

An action. Filled (primary, green) is the one main action. Secondary (charcoal) and tonal (tertiary, light grey) follow; text is the quietest. Icon is a white disc for top bars and dismiss; icon-filled is the green disc for the main nav action; onImage makes an icon button translucent over photos.

Examples

HTML and CSS

Framework-free reference. Styles live in system/components/button.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`	filled \| secondary \| tonal \| text \| icon \| icon-filled	filled
`size`	sm \| md \| lg	sm
`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
`onImage`	boolean
`block`	boolean
`disabled`	boolean
`loading`	boolean
`destructive`	boolean
`confirm`	part
`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

confirm: BottomSheet.

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.

one-filled At most one filled button per card. Other actions are tonal or text.

destructive Destructive buttons use the text variant and need a confirm sheet.

sheet-close Modals close with an X at the bottom: centred when there is no action, to the left of the primary action when there is. The sheet adds the X itself, so Cancel, Keep or Keep browsing buttons are not allowed.

Usage in recipes

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

Bot functions: All functions, Bill split and payments, Bookings, Calendar and itinerary, Community and PopTonight picks, Email connect, Friend catchups, Friends nearby, 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, Video calls with notes, Voice calls with notes.