Component Catalog
Modal
Overlay dialog with trigger element and content.
A2UI → Nuxt UI Mapping
| A2UI Property | Nuxt UI Result |
|---|---|
trigger | Child component that opens the modal on click |
content | Child component rendered inside UModal |
Example JSONL
{"version":"v0.10","createSurface":{"surfaceId":"modal_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"modal_demo","components":[
{"id":"root","component":"Column","children":["modal1"]},
{"id":"modal1","component":"Modal","trigger":"open_btn","content":"modal_content"},
{"id":"open_btn","component":"Button","label":"Open Modal","variant":"primary"},
{"id":"modal_content","component":"Column","children":["modal_title","modal_text","close_btn"]},
{"id":"modal_title","component":"Text","text":"Confirmation","variant":"h3"},
{"id":"modal_text","component":"Text","text":"Are you sure you want to proceed? This action cannot be undone."},
{"id":"close_btn","component":"Button","label":"Confirm","variant":"primary"}
]}}
Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
trigger | ComponentId | ✅ | — | ID of the component that opens the modal |
content | ComponentId | ✅ | — | ID of the component displayed inside the modal |
How It Works
- The trigger component (e.g. a Button) renders normally in the page
- Clicking the trigger opens the
UModaloverlay - The content component renders inside the modal with padding
- The modal can be closed by clicking outside or pressing Escape
Try It
Copy the JSONL above and paste it in the Playground Paste tab.