Component Properties

Properties are the information you pass to a component's composition or children.

The image below has a Counter Component that passes a text value to the composition to render next to the current value.

Counter Component with a text propertyCounter Component with a text property

Counter Component with a text property

Properties can be added to a Component in several ways, either from the Configuration menu or by selecting the add/plus button from the Properties section.

Component Configuration and add Properties button.Component Configuration and add Properties button.

Component Configuration and add Properties button.

Once you select the add/plus button, a Configuration menu will open where you can name the property, add a Description, add a Documentation link, set the Control type, and set the placeholder.

Component Configuration Menu with default property createdComponent Configuration Menu with default property created

Component Configuration Menu with default property created

Component Configuration Menu with text property selected and details addedComponent Configuration Menu with text property selected and details added

Component Configuration Menu with text property selected and details added

I made a new text property, set the control type to an Input, and added a placeholder value. If we exit the Configuration menu, we will see the text prop under the Properties section with our placeholder.

The text property displayed in the Properties PanelThe text property displayed in the Properties Panel

The text property displayed in the Properties Panel

Adding a text property to the Counter Component.Adding a text property to the Counter Component.

Adding a text property to the Counter Component.

We can use this new text prop to add some text to the Counter Component.

Adding a value to the text propertyAdding a value to the text property

Adding a value to the text property

The typography component can now use the value passed from the Counter Component text property.

Using the Logic Dynamism to add our text value to the typography component Using the Logic Dynamism to add our text value to the typography component

Using Logic Dynamism to add our text value to the typography component