Component Catalog
Button
Interactive button with variant mapping to Nuxt UI.
A2UI → Nuxt UI Mapping
| A2UI Variant | Nuxt UI Variant |
|---|---|
"primary" | "solid" |
"outline" | "outline" |
"ghost" | "ghost" |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"btn_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"btn_demo","components":[
{"id":"root","component":"Row","children":["primary","outline","ghost"]},
{"id":"primary","component":"Button","label":"Primary","variant":"primary"},
{"id":"outline","component":"Button","label":"Outline","variant":"outline"},
{"id":"ghost","component":"Button","label":"Ghost","variant":"ghost"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
label | string | ✅ | — | Button text |
variant | enum | — | "primary" | "primary", "outline", "ghost" |
action | object | — | — | Action to emit on click (e.g. { event: { name: "submit" } }) |
Try It
Copy the JSONL above and paste it in the Playground Paste tab.