Skip to main content
ComposerAdd(options?: ComposerAddOptions): Component;

​
Parameters

​
options
ComposerAddOptions
Configuration options for the composer add button.

​
Support

​
Usage

​
Basic add button

ComposerAdd({ property: "items" })

​
Add button with custom title

ComposerAdd({ 
    property: "menuItems",
    title: "Add Menu Item" 
})

​
Add button in a list context

VStack([
    ForEach(items, (item, index) => 
        ItemComponent(item)
    ),
    ComposerAdd({ 
        property: "items",
        title: "Add New Item" 
    })
])

​
Add button in a composer group

ComposerGroup({ group: "sidebar" }, [
    ForEach(sidebarItems, (item) => 
        SidebarItem(item)
    ),
    ComposerAdd({ 
        property: "sidebarItems",
        title: "Add Sidebar Item"
    })
])

​
Multiple add buttons for different properties

VStack([
    Text("Header Items").font("headline"),
    ForEach(headerItems, (item) => HeaderItem(item)),
    ComposerAdd({ 
        property: "headerItems",
        title: "Add Header Item" 
    }),
    
    Text("Footer Items").font("headline"),
    ForEach(footerItems, (item) => FooterItem(item)),
    ComposerAdd({ 
        property: "footerItems",
        title: "Add Footer Item" 
    })
])

​
Context Integration

The ComposerAdd component works within the composer system by:
  1. Reading the current composer group context to determine allowed component types
  2. Using the property parameter to specify which data collection to add to
  3. Enabling dynamic content creation within the layout system

​
Notes

  • The property parameter is required and must match a property in your layout component properties.
  • This component is designed for use within composer-managed layouts and may not render meaningfully outside that context
  • The allowed component types are determined by the composer group configuration