# Bravo Tags Master List {% hint style="info" %} [Learn how to use Bravo Tags](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/what-are-bravo-tags) {% endhint %} ### Figma Plugin Speed up your Bravorizing process with our ready-made UI presets. {% hint style="info" %} Try out our official [Bravorizer plugin for Figma](https://www.figma.com/community/plugin/1149380850484102424) and speed up your app-building process! {% endhint %} ### Glossary * **Element** = the app element created from the tag * **Bravo Tag** = the tag itself * **Layer Type** = the type of layer you can place this tag on * **Tag Type** = Bravo categorization of the tag ### 🗂 Menus {% tabs %} {% tab title="Tabs Menu" %} To create a menu with tabs you will need this tag: ``` [menu:tabs] ``` The menu that stays fixed on every screen is a bottom navigation bar.\ 👉 Where to label the tag: **Top-level app page** [See full docs](https://docs.bravostudio.app/bravo-tags/menus/tabs-menu) {% endtab %} {% tab title="No menu tabs" %} To hide the menu with tabs on a specific page you need this tag: ``` [nomenu] ``` Define which pages to hide the tab menu\ 👉 Where to label the tag: **Top-level app page**
[Sample Figma setup](https://www.figma.com/community/file/981942888856892917)
{% endtab %} {% tab title="Slide Menu" %} To hide the menu with tabs on a specific page you need this tag: ``` [menu:slide] ``` The menu opens by sliding in from the left side of the screen.\ 👉 Where to label the tag: **Top-level app page** [See full docs](https://docs.bravostudio.app/bravo-tags/menus/slide-menu) {% endtab %} {% tab title="Modal Menu" %} To create a menu that will be opening like a modal you will need this tag: ``` [menu:modal] ``` The menu slides in from the bottom and covers the entire screen.\ 👉 Where to label the tag: **Top-level app page**\ \ To close the Modal menu you also will need to set up this tag in the element that will trigger the close action: ``` [action:close] ``` \ \ 👉 Where to label the tag: **Any layer (except top-level)** [See full docs](https://docs.bravostudio.app/bravo-tags/menus/modal-menu) {% endtab %} {% endtabs %} ### 📦 Containers, topbar & others {% tabs %} {% tab title="Container" %} In order to properly display your content, you must enclose it within a container tag. Additionally, if you wish to repeat this container tag multiple times, you can use it to create a list of items. ``` [container] ``` The container defines blocks of an app page by their distinct behaviors.\ 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/set-up-design/setting-up-your-design-file/the-container) {% endtab %} {% tab title="Top Bar" %} The Top bar is a container that could be fixed or not at the top of each page. **Fixed Top bar** ``` [container:top-bar] ``` In this case, the Top bar container fixes its position to the top of the screen and does not scroll with the rest of the screen. **Hide on scroll Top Bar** ``` [container:top-bar:hidescroll] ``` The top bar container will hide as you scroll up the page, and reappear when you scroll down. **Show on scroll Top Bar** ``` [container:top-bar:showscroll] ``` The top bar container will show as you scroll down the page, and will remain until you scroll up to the top again. \ 👉 Where to label the tag: **2nd-level container**
[Sample Figma setup](https://www.figma.com/community/file/981972505586768390) [See full docs](https://docs.bravostudio.app/bravo-tags/containers/container-top-bar) {% endtab %} {% tab title="Aspect Ratio" %} The height of the container is calculated with the screen height, so they won't maintain the designed aspect ratio but is useful when you want a container to be relative to the screen. ``` [aspectratio:screen] ``` 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/bravo-tags/containers/aspect-ratio-relative-to-screen) {% endtab %} {% tab title="Layer (sticky element)" %} A container that fixes its position on-screen and does not scroll with the rest of the screen. ``` [layer] ``` \ 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/bravo-tags/containers/layer-sticky-element) {% endtab %} {% endtabs %} ### 🎠 Sliders {% tabs %} {% tab title="Sliders horizontal scroll" %} Slides a collection of containers horizontally. Each tag is a different animation. ``` [container:slider:horizontal] ``` ``` [container:slider:default] ``` ``` [container:slider:crossfade] ``` ``` [container:slider:cube] ``` ``` [container:slider:pager] ``` ``` [container:slider:parallax] ``` ``` [container:slider:rotate] ``` ``` [container:slider:zoom] ``` \ 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/bravo-tags/containers/container-horizontal-slider)\ Adds a dots indicator at the bottom of the slide element, with the specified color (use HEX code). Place it on the same layer as the `[container:slider]` tag. {% endtab %} {% tab title="Slider indicators" %} **Indicator + color setup** ``` [slider-indicator:#FFFFFF] ``` ``` [slider-indicator::] ``` \ \ 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/bravo-tags/containers/container-horizontal-slider) {% endtab %} {% tab title="Automatic sliders" %} The slider will move automatically every 5 seconds. \ Place it on the same layer as the `[container:slider]` tag.
``` [slider-automatic:5] ``` Slider will move automatically **every x seconds**. For example **8 seconds** `[slider-automatic:8]` **📍 Where to add the tag:** on the same layer as the \[container:slider] tag. \ 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/bravo-tags/containers/container-horizontal-slider) {% endtab %} {% tab title="Infinite sliders" %} After the last slide, the first slide will be shown, so the user can swipe in one direction infinitely. Place it on the same layer as the `[container:slider]` tag. ``` [slider-infinite] ``` \ 👉 Where to label the tag: **2nd-level container** [See full docs](https://docs.bravostudio.app/bravo-tags/containers/container-horizontal-slider) {% endtab %} {% endtabs %} ### 💡 Modal pages {% tabs %} {% tab title="Modal page default (100%)" %} A screen that slides in from the bottom and covers 100% of the previous screen. Not scrollable. Swipe down the screen down to close. ``` [page:modal] ``` \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/967380255651810770)
{% endtab %} {% tab title="Partial modal page" %} A screen that slides in from the bottom and covers a percentage of the previous screen. \ It is scrollable and you can make it as long as you want.
``` [page:modal:] ``` i.e. **\[page:modal:30%]** \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/967380255651810770) {% endtab %} {% tab title="Fixed Modal page" %} A partial screen that slides in from the bottom and covers a part of the previous screen. Not scrollable. Swipe down the screen down to close.
``` [page:modal:fixed] ``` \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/967380255651810770) {% endtab %} {% tab title="Modal iOS card" %} **⚠️ iOS-only feature ⚠️**\ \ A screen that covers a majority of the screen. It is scrollable and you can make it as long as you want. Swipe down the screen to close. If you are using this feature on Android, will display the default modal page. ``` [page:modal][ios:cards] ``` You will need 2 tags \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/967380255651810770) {% endtab %} {% endtabs %} ### 🎉 Pop-up pages {% tabs %} {% tab title="Default" %} A screen that pops over your other app pages. To close the popup will require the `[action:close]` tag ``` [page:popup] ``` \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/981969825191369221)
{% endtab %} {% tab title="Blur background" %} Get a blurred effect on the background behind the popup. ``` [page:popup:blur] ``` To close the popup will require the `[action:close]` tag\ \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/981969825191369221) {% endtab %} {% tab title="Color Background" %} Change the color behind the popup to get more customization other app pages. ``` [page:popup:] ``` e.i. \[page:popup:#FFFFFF]
To close the popup will require the `[action:close]` tag \ 👉 Where to label the tag: **Top-level app page** [Sample Figma setup](https://www.figma.com/community/file/981969825191369221) {% endtab %} {% endtabs %} ### 👋 Intro & Onboarding {% tabs %} {% tab title="Intro" %} Displays an Intro screen of your choice: \ **1**) every time the app user opens the app or **2**) only the first time ``` [intro:always] ``` ``` [intro:once] ``` To close the intro will require the `[action:closeintro]` tag **⚠️ DO NOT** link the element that triggers the close action to any page. \ For example to **HOME page** \ 👉 Where to label the tag: **Top-level app page** [See docs](https://docs.bravostudio.app/bravo-tags/intro-and-onboarding/page-intro)
{% endtab %} {% tab title="Post-login " %} Displays a post-login screen after a login or register action. It can be displayed only once (the first time a user logs in or registers), or always. \ \ It will be displayed after the login or register action, and before the home screen. ``` [post-login:always] ``` ``` [post-login:once] ``` To close the popup will require the `[action:close]` tag \ 👉 Where to label the tag: **Top-level app page** [See docs](https://docs.bravostudio.app/bravo-tags/intro-and-onboarding/post-login-page-onboarding) {% endtab %} {% endtabs %} ### 💎 Components (Rectangle level) {% tabs %} {% tab title="Video " %} An audio-less video that autoplays when a user is on the app screen. The video will replace the content of the rectangle. Supports URL ending in .**mp4.** ``` [component:video:https://google.com/test.mp4] ``` \ 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/components/component-autoplay-video)
{% endtab %} {% tab title="GIF" %} A GIF will replace the content of the rectangle. ``` [component:gif:https://google.com/test.gif] ``` \ 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/components/component-gif) {% endtab %} {% tab title="Lottie" %} A Lottie will replace the content of the rectangle. ``` [component:lottie:LOTTIE_JSON_URL] ``` \ 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/components/component-lottie) {% endtab %} {% tab title="Lottie animated" %} These are the tags you can use in the design file to implement the toggle component. **Animated component** ``` [component:stateful-lottie:] ``` **Input component form** ``` [component:input-stateful-lottie:] ``` The Lottie animation frame goes from 0 to 180. We will set a `` of 90 as it's where we want the animation to stop. `[component:input-stateful-lottie::``90``]` The animation plays as follows:\ To enable, on tap, the animation plays from 0 to 90,\ To disable, on tap, the animation plays from 90 to end. \ 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/components/lottie-animated-component) {% endtab %} {% tab title="Webview" %} A web page will replace the content of the rectangle. ``` [component:web-view:https://bravostudio.app] ``` \ 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/components/component-webview) {% endtab %} {% tab title="SVG" %} If your vector shape layer ***looks funky*** in **Bravo Vision** or if a layer has ***2+ effects***, add this tag to any element, group or frame to allow Bravo to render it as it looks in Figma. ``` [component:svg] ``` \ 👉 Where to label the tag: **Inside a container frame in any Shape layer (3rd level)** :warning: A group with this tag cannot be bounded, please ensure it consists of a single element. {% endtab %} {% tab title="Zoomable image" %} Creates a zoomable image. The zoom is trigged by pinch gesture. ``` [component:imagezoom] ``` \ 👉 Where to label the tag: **Inside a container frame in a Image layer (3rd level)** [See Sample Figma file](https://www.figma.com/community/file/1030830462731458065)\
{% endtab %} {% tab title="Shape fill" %} SVGs/vectors are "fit" to container by default, as they are normally used for icons. With this tag, the SVG will be "fill" to container, which is useful for backgrounds. ``` [shape:fill] ``` \ 👉 Where to label the tag: **Inside a container frame in a Shape layer (3rd level)**
{% endtab %} {% endtabs %} ### 📈 Interactive Components (Rectangle level) {% tabs %} {% tab title="Maps with markers" %} Create an interactive map component with custom markers To create the interactive map: ``` [component:map:interactive] ``` To create the map as a fixed image with the markers, not movable or zoomable: ``` [component:map] ``` To specify statically the centre of the map and the zoom value: ``` [component:map:::] [component:map:interactive:::] ``` To require location permissions to the user in a certain app screen (place the tag in the top-level app page): ``` [require:location] ``` To create a custom marker: ``` [asset:marker:default] ``` 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/map-with-markers) {% endtab %} {% tab title="Charts" %} Bravo supports 2 chart types at the moment: **pie** and **bar**. Depending on the data you want to visualize, you may find the most suitable format. To create a pie chart: ``` [component:chart:pie] ``` To create a bar chart: ``` [component:chart:bar] ``` 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/charts) {% endtab %} {% endtabs %} ### ### 📝 Components (Text level) {% tabs %} {% tab title="Flexo" %} A GIF will replace the content of the rectangle. ``` [component:gif:https://google.com/test.gif] ``` \ 👉 Where to label the tag: **Inside a container frame in a Rectangle shape (3rd level)** [See docs](https://docs.bravostudio.app/bravo-tags/components/component-gif) {% endtab %} {% tab title="Rich Text" %} Display text with Markdown or HTML styling. Useful for APIs that send text styling. #### **Mark Down style** Text with Markdown styling ``` [component:text:md] ``` #### **HTML style** Text with HTML styling. ``` [component:text:html] ``` Supported HTML elements: ```