> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/what-are-bravo-tags.md).

# Bravo Tags: adding functionality to the UI elements

A Bravo Tag is **a text string that you place in the component names of your design file**. After you import the design file into Bravo Studio, the layer with the Tag will turn into a mobile component or action in your final app (preview how it works with Bravo Vision). 

{% hint style="info" %}
Try out our official [Bravorizer plugin for Figma](/set-up-design/bravo-plugin-for-figma.md) and speed up your app building process!
{% endhint %}

If you are already a Bravo Tag pro, here is the [Bravo Tag Master List](https://www.notion.so/bravostudio/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8).

![](/files/-MjF-22hOnirrmwmm7Md)

## How to use Bravo Tags

Learn about the layer hierarchy. This is how you should organise the layers of your design file and determines in which layers you can place which tags. 

{% content-ref url="/pages/ACrqT37S6gANFp3cSgcr" %}
[Structuring the design: the layer hierarchy](/set-up-design/setting-up-your-design-file/structuring-the-design-the-layer-hierarchy.md)
{% endcontent-ref %}

Learn about an essential concept of Bravo: **the container**. This is a necessary element to have in the structure of every app page.  

{% content-ref url="/pages/RMwQ9MnTJko6ICXwFH0r" %}
[The container](/set-up-design/setting-up-your-design-file/the-container.md)
{% endcontent-ref %}

### How to add a Bravo tag to your design file

1\. In the [Bravo Tags Master List,](https://www.notion.so/bravostudio/Bravo-Tags-Master-List-145bec845f0b4afaa9e3bb8321b218a8) see which layer it's compatible with. Check out the sample design file or tutorial to see how to set up each tag.

![](/files/-MjF37wwPJW9_mofx0wy)

![](/files/-MjF4OW8kukz7J5AXiIA)

2\. Copy the tag.

![](/files/-MjF35oRxm7ym9reqGNb)

3\. Paste it into the name of the compatible layer.

![](/files/-MjF2quzW1XXvSYWbUil)

4\. Open your app project in [Bravo Vision](/get-started/bravo-vision-previewer.md) to preview the tag functionality.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/what-are-bravo-tags.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.