Skip to main content
Properties make your components reusable by accepting different data. There are four types:
  • Text / Number — Simple text or numeric values
  • Icon — Icon selection from available icon libraries
  • Image — Image URLs or uploaded files
  • Slot — Regions for dynamic content and composition
When using component instances, properties can be configured in the inspector.
Showing properties of a component instance

Configuring properties of a Button component instance

Text, icon, and image props are for simple data. Slots are special properties that allow for composition—see dedicated section below.

​
Creating a new property

  1. Ensure you have nothing selected in design mode
  2. On right-hand panel, click Properties >
  3. Select the property type to add
You can also create a property when linking elements.

​
Removing properties

  1. Ensure you have nothing selected in design mode
  2. Look for your property under Properties
  3. Click on the to delete

​
Linking element contents to a property

Linking element contents to a property
  1. Click on the element
  2. In inspector, click Content >
  3. Select the property or New Property… to create a new one

​
Slots

Slots expose a region of your component as a prop. They’re useful for:
  • Reusability & composition — Add dynamic content like elements and other components within others
  • Adding interactions in code — Let developers add business logic within your components. See adding interactive logic for more.

Learn how slots work in Subframe.

​
Adding slots

  1. Create a stack
  2. In the inspector, click Slot >
  3. Name your slot, click Create
You can also right-click or press / to open quick actions, then select Add slot.

​
Using slots

Editing slots within a component instance
  1. Insert a component instance
  2. In inspector, look for the slot property and click Edit X layers
Within the canvas, you can also double-click any contents within a slot to edit.