# Component states

{% embed url="<https://www.loom.com/share/b40faa82cde04732974f557c16188f49>" %}

{% hint style="info" %}
There are 2 ways to implement states in your design file: **Figma variants** or **Bravo tags**. For Figma, you can use both. For Adobe XD, only with tags.
{% endhint %}

There are 3 possible states that you can apply to an element. Usually only two are used for one element (i.e. default + pressed or default + active).

| State   | Types of element that support it                   | Gesture that activate it                   |
| ------- | -------------------------------------------------- | ------------------------------------------ |
| Default | All                                                | None, the element that displays by default |
| Pressed | All, best for: buttons, navigation elements        | When pressed                               |
| Active  | All, best for: menu items, like button, checkboxes | When pressed                               |

## Option 1: Bravo tags

The element with the tag will display when the user interacts with the appropriate gesture.

**📍 Where to add the tag:** Any UI element layer (not page level or container level)

```
[state:default]
```

```
[state:pressed]
```

```
[state:active]
```

📍 Where to add the tag: The group that contains the individual states

```
[state-set:INSERT-SET-NAME] 
```

How to set it up:

1. Create a version of the element for each state it will have.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FbT5U034rUOkjOSbsJn3E%2FScreenshot%202022-04-26%20at%2017.25.46.png?alt=media\&token=19a44b02-dba3-43c9-990d-75d5ef56b205)

2\. Add the respective state tag to the layer name of each element state (if the element is made up of multiple layers, group them together add the tag to the name of the group/frame)

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2Fnae7riBb8CfnN7OpUuCM%2FScreenshot%202022-04-26%20at%2017.26.57.png?alt=media\&token=78c23f5d-adc7-4c40-ab79-ee54327ce11d)

3\. Position the element states on top of each another so that there is a smooth transition when each state appear. The layer order does not matter.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FGnhtRt9BFWk5Wnr4eQFl%2FScreenshot%202022-04-26%20at%2017.34.28.png?alt=media\&token=2a060090-4fcd-413b-9802-235b0e3905a2)

4\. Group the elements together. Add the “state-set” tag to the layer name. Remember to add a set name in the tag. For example, \[state-set:back-button]

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FJatjJEmbCT0ThgU9DlOf%2FScreenshot%202022-04-26%20at%2017.35.24.png?alt=media\&token=3c502449-9796-4628-b67a-194475b9dfa8)

5\. Update your file in Bravo Studio and test it out in Bravo Vision! 🚀

### Example setups

Default + pressed: navigation button

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FwvbRwBECfW1yswFSxUxE%2FFrame%2015.png?alt=media\&token=8bed246b-e8cc-405b-b1a2-984ed7087610)

Default + active: menu item

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F88x4cLoGl5Muw5ZCpRJA%2FFrame%2016.png?alt=media\&token=ebe32d5e-a854-46a9-8da7-a5203143d1d5)

## Option 2: Figma variants

For Figma files only.

1. Create a version of the element for each state it will have.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FYLUPyQDvUbQdYpz8XCEw%2FScreenshot%202022-04-26%20at%2017.36.50.png?alt=media\&token=51777d11-2690-49f1-8b5d-5164cc673e3f)

2\. Turn each element state into a Figma component.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FC0NAGclQWA4zil8o1bT3%2FScreenshot%202022-04-26%20at%2017.37.04.png?alt=media\&token=0d1faf97-259f-4c1f-b874-b68171dcf79c)

3\. Select all the elements, click “**Combine as variants**” on the right panel in Figma

4\. Rename the property as `state`.

5\. Rename the default state element as `default`.

6\. Rename the pressed state element as `pressed`, or the active state element as `active`.

{% embed url="<https://www.loom.com/share/40723fe886f444b8b8e4c4c7be355377>" %}

7\. Create an instance from each Figma component.

8\. Position the element states on top of each another so that there is a smooth transition when each state appear. The layer order does not matter.

9\. Rename each instance as the state they represent. For example “default” and “pressed”.

10\. Group the elements together. You can rename the group or leave as is.

{% embed url="<https://www.loom.com/share/70338fa6ea0b4827a6145c35c43aca27>" %}

11\. Update your file in Bravo Studio and test it out in Bravo Vision! 🚀

{% hint style="info" %}
If you are creating an element similar to a checkbox or “like” button, where toggling the active state should interact with the backend — check out this tutorial on [how to connect the state to the backend](https://docs.bravostudio.app/data-binding/data-binding-types/data-binding-add-remote-actions-to-your-ui) using remote action.
{% endhint %}

## 💾 Example file

Duplicate the file below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/938484133762361804>" %}

You can also [duplicate this sample app](https://projects.bravostudio.app/sample-apps/functionalities?appId=01EVEXQEKRD8FQGM8BWZ2EPRR0) right in Bravo Studio to learn more.