Attributes are a way for components to receive input from its parent component or page. There are a few reasons why this can be extremely useful.
It 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 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 components, as well as how much delay there should be before the tooltip is shown
The second reason is to be able to pass data to a component that it otherwise would not have access to. This lets you e.g. fetch data from an API in one component, and pass down some of that data to a child component.
Defining attributes
You can defined a components attributes 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 the attribute will have when developing the component inside the toddle editor. It does not affect the components behavior when it is used as part of other components or pages.
The attribute can now be accessed inside any formula in that component.
