Component Variables
Variables allow you customize parts of a component like a button label or background color. They will appear as properties for the instances of your component.
Setting Variables
To make the process of changing certain properties of your instances easier, for instance changing the button label or color directly from the canvas, you can use variables. When you create a button, a text variable for the button label is already created for you, but on top of that you can create as many as you wish.
For example, if you want to easily change your button color on the fly, you can create a color variable. To do so, enter component isolation and click the tiny plus next to the color property, and then Create. A modal will appear allowing you to pick a name for your variable and a default value.
Using Variables
Once your variables are set, going back to the canvas and selecting an instance will show your variable fields in the component section of the properties panel. Here you can, for instance, replace the label of a button via an input field, as well as picking the background color that was previously set as variable.
Related Articles
Component Creation
Component Variants
Component Transitions
Component Sharing
