Stateful component (like button)

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.

[state:default][action:remote]
[state:active][action:remote]

These components must be surrounded by a group with the following tag:

[state-set:{identifier-name}]

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.

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.

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

Bravo Sample: Like ButtonFigma

See the following article to implement this functionality with Xano:

Multi-user setup with XanoBravo Studio Help Center