Stateful component (like button)
Create components with default and active states
Add toggle elements in your apps! With this feature, you can create components that will have two different states. The state change will happen when the user presses the component inside the app. An example of this would be "like" buttons, but you can create any design you wish for the component.
Each time the user presses the component and the state of the element changes, a remote action can be triggered to keep track of the state in the backend, or to send any data you wish. This is optional, but necessary in case you want to keep track of the states each time a screen with these components is opened, or you want to create lists filtering the elements by their state (for instance, a screen with liked/bookmarked items).
👉 The Tags
These are the tags you'll need in the design file to implement the toggle component. See more information in the next section.
You need to create two components: active and default. If you're using Figma, you can also create variants. See more in the next section.
Add a remote action tag for each state, as shown in the example design file.
These components must be surrounded by a group with the following tag:
Replace {identifier-name} with a name of your choice. For instance, [input-state-set-likebutton].
⚒️ How to set it up
🎨 Design file setup
To create a toggle component, you can:
Use Figma variants to create two versions of the component: default and active.
Create the active and default components separately in the design file, and add Bravo tags to them.
The result will be the same, regardless of the option you choose. If you're using Adobe XD, you must implement it with Bravo tags.
You can check out our example design file, and adapt it to your own design. In this example, we'll create a like button. However, you can create the design you wish.
You can create a list of stateful components by binding the component you create in the design file to list data. To do that, the stateful component must be inside a container.
Option 1: Using Figma variants
1. Create a Figma component and add two variants, setting their state property to active and default, respectively.
2. Add the two variants into the app design, and create a group around them.
Set the
[state-set:{identifier-name}]tag to the group, replacing{identifier-name}with a name of your choice, for instance,[state-set:likebutton]. In case you create more than one different stateful component (for instance, a heart and a thumb), you need to set different names for each of them.Set the
[action:remote]tag to each of the variant items. The remote action will be bound to an API request in Bravo Studio's Data Binding section, after importing the file. This will be covered in the next section of this document.
You'll want to display the default and active elements covering each other, so they both occupy the same visual space.
Option 2: Using Bravo Tags
In case you're not using variants, or you're using Adobe XD, you also have the option to create the active and default elements with Bravo Tags.
1. Create two separate elements in the design file: one for the default state, and another one for the active state. Group the elements together.
2. Add the [state-set:{identifier-name}] tag to the group, replacing {identifier-name} with a name of your choice. Add the [state:default] and [state:active] tags to them, respectively. Also, add the [action:remote] tag to both the default and active state elements.
3. Finally, add the group in the part of the design you want, making both the active and default elements "cover" each other.
💾 Example files
See the following article to implement this functionality with Xano:
Last updated
