Attributes lets you pass data from a parent component to a child component. This lets you build components that can adapt to different input.

Example: Alert component

We want to build an alert component like the one shown in the image below.

Screenshot 2022-11-19 at 09.45.02.jpg

The message in the component should be customizable so it can be used different places. So we create an Attribute for the component called Message, and bind that the text value to the attribute.

Screenshot 2022-11-19 at 09.43.35.jpg

When using the component inside a page or parent component we now have access to the new Message attribute in the right panel, and can set it to an appropriate value.

Screenshot 2022-11-15 at 18.24.12.jpg

Configurable components

Attributes allow you to configure components so that they can be re used in different scenarios. Components can have any number of Attributes and and any type of data can be passed as an attribute.

Creating attributes