Attributes

Attributes are a way for components to receive input from their parent components or page. There are a few reasons why this can be extremely useful.

Using attributes allows you to create components that are configurable. Components can alter their behavior based on the data they are passed, through their attributes. This way the same component can be used multiple places in your application, but behave slightly different based on the attributes it is given in each different place.

Imagine a tooltip component that shows a message when a certain element is hovered. You could us an attribute to set if the tooltip should be shown in the left or right side of the component, as well as how much delay there should be before the tooltip is shown.

Using attributes, you can also pass data to a component that it otherwise would not have access to. This lets you, for example, fetch data from an API in one component, and pass down some of that data to a child component.

Defining attributes

You can define attributes for a component in the data panel on the right side of the editor.

Click on the "+" button next to Attributes.

Each attribute needs a unique name which can only consist of lowercase letters, numbers and "-".

You also need to provide a Test value. This is the value that you will see when developing the component inside of the toddle editor. The Test value does not affect the component's behavior when it is used as part of other components or pages.

The attribute can now be accessed inside any formula in that component.

Learn more about attributes: