šŸ“’

Bravo Tags Master List

Copy and paste these tags into the layer names in your design file and see your prototype come to life with Bravo Vision.

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 categorisation of the tag

šŸ’”

Keyboard shortcut to open or close all toggles cmd/ctrl + option/alt + t

šŸ—‚ Menus

Menu

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Tabs menu
[menu:tabs]
Top-level app page
Menu
The menu that stays fixed on every screen as a bottom navigation bar.
No menu tabs
[nomenu]
Top-level app page
MenuTab menu
Define which pages to hide the tab menu
Slide menu
[menu:slide]
Top-level app page
Menu
The menu that opens by sliding in from the left side of the screen.
Modal menu
[menu:modal]
Top-level app page
Menu
The menu that slides in from the bottom and covers the entire screen.
Close modal menu
[action:close]
Any layer (except app page)
Mobile ActionMenu
Closes the modal menu and returns to the previous screen.
šŸ“¦ Containers, topbar, slider

Containers

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Container
[container]
2nd-level container
Container
The container is the wrapper of the sections that will generate a list
Top bar
[container:top-bar]
2nd-level container
Container
The top bar container fixes its position to the top of the screen and does not scroll with the rest of the screen.
Top bar (hide on scroll)
[container:top-bar:hidescroll]
2nd-level container
Container
The top bar container will hide as you scroll up the page, and reappear when you scroll down.
Top bar (Show on scroll)
[container:top-bar:showscroll]
2nd-level container
Container
The top bar container will show as you scroll down the page, and will remain until you scroll up to the top again.
Aspect ratio relative to screen
[aspectratio:screen]
2nd-level container
Container
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. (ex: container height is 100% of the screen in the design, it will appear 100% on any device screen)
Layer (sticky element)
[layer]
2nd-level container
Container
A container that fixes its position on-screen and does not scroll with the rest of the screen.
Slider (horizontal scroll)
[container:slider:horizontal] [container:slider:default] [container:slider:crossfade] [container:slider:cube] [container:slider:pager] [container:slider:parallax] [container:slider:rotate] [container:slider:zoom]
2nd-level container
Container
Slides a collection of containers horizontally. Each tag is a different animation.
Slider indicators
[slider-indicator:#FFFFFF]
2nd-level container
Container
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.
Automatic sliders
[slider-automatic]
2nd-level container
Container
Slider will move automatically every 5 seconds. Place it on the same layer as the [container:slider] tag.
Infinite sliders
[slider-infinite]
2nd-level container
Container
After the last slide, the first slide will be shown, so user can swipe in one direction infinitely. Place it on the same layer as the [container:slider] tag.

šŸ’” Modal pages

Modal pages

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Modal page at 100%
[page:modal]
Top-level app page
Page
A screen that slides in from the bottom and covers 100% of the previous screen. Not scrollable. Swipe down the screen down to close.
Partial modal page
[page:modal:NUMBER%] i.e. [page:modal:30%]
Top-level app page
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. Swipe down the screen down to close.
Fixed modal page
[page:modal:fixed]
Top-level app page
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.
Modal iOS card
[page:modal][ios:cards]
Top-level app page
Page
āš ļø 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.
šŸŽ‰ Pop-up pages

Pop-up pages

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Pop-up pages
[page:popup]
Top-level app page
Page
A screen that pops over your other app pages. To close the popup will require the [action:close] tag
Pop-up with Blur Background
[page:popup:blur]
Top-level app page
Page
Get a blurred effect on the background behind the popup.
Pop-up with Coloured Background
[page:popup:<color-code> i.e. [page:modal:#CCFAFF00]
Top-level app page
Page
Change the color behind the popup to get more customization
Close pop-up page
[action:close]
Any layer (except top-level & container)
Mobile ActionMenu
Closes any pop-up page and returns to the previous screen.
šŸ‘‹ Intro

Intro

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Intro screen
[intro:always] or [intro:once]
Top-level app page
Mobile Action
Displays an Intro screen of your choice 1) every time the app user opens the app or 2) only the first time
Close intro screen
[action:closeintro]
Any layer (except top-level)
Mobile Action
Closes the Intro screen with a slide-down animation to reveal the home screen. DO NOT link this element to any page.

šŸ’Ž Components

Component

ElementBravo TagWhere to label the tagTag TypeWhat is it?TutorialCan it be connected to dynamic data?
Video
[component:video:https://google.com/test.mp4]
Rectangle layer
Component
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.
GIF
[component:gif:https://google.com/test.gif]
Rectangle layer
Component
A GIF will replace the content of the rectangle.
Lottie
[component:lottie:https://google.com/data.json]
Rectangle layer
Component
A Lottie will replace the content of the rectangle.
Web View
[component:web-view:https://bravostudio.app]
Rectangle layer
Component
A web page will replace the content of the rectangle.
Flexible text
[flexo]
Text layer
Component
The text box will expand down to fit the content connected via API. Note: the text box must be the bottom-most element of the container.
Markdown text
[component:text:md]
Text layer
Component
Display text with Markdown styling. Useful for APIs that send text styling.
HTML text
[component:text:html]
Text layer
Component
Display text with HTML styling. Useful for APIs that send text styling.
Vector/SVGs
[component:svg]
Shape layer
Component
If your vector shape layer looks funky in Bravo Vision or if a layer has 2+ effects, add this tag to the layer name (or the group) to allow Bravo to render it correctly.
Shape "fill to container"
[shape:fill]
Shape layer
Component
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.

šŸ“ Forms

Form

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Input field: single-line text
[component:input-text]
Text layer
ComponentForm
Turns a text box into a single-line text input field
Input field: text area
[component:input-textarea]
Text layer
ComponentForm
Turns a text box into a multi-line text input field
Input field: number
[component:input-number]
Text layer
ComponentForm
Turns a text box into a number input field
Input field: email
[component:input-email]
Text layer
ComponentFormLogin
Turns a text box into an email input field
Input field: telephone
[component:input-tel]
Text layer
ComponentFormLogin
Turns a text box into a phone input field
Input field: url
[component:input-url]
Text layer
ComponentForm
Turns a text box into a URL link input field
Input field: time
[component:input-time]
Text layer
ComponentForm
Turns a text box into a time input field picker
Input field: date
[component:input-date]
Text layer
ComponentForm
Turns a text box into a date input field picker
Input field: password
[component:input-password]
Text layer
ComponentFormLogin
Turns a text box into a password input field. Turns the user input into dots.
Input field: Image
[component:input-image]
Rectangle layer
FormComponent
Turns a rectangle or image into an upload image input field. šŸ’” The uploaded image will be placed in the area of the rectangle or image placeholder
Input field: file
[component:input-file]
Text layer
FormComponent
Turns a text box into a password input field. šŸ’” The name of the file will be placed in the text placeholder
Submit data
[action:submit]
Any layer (except top-level & container)
Mobile ActionForm
Sends data to external database. Used for the submit button of a page with input fields connected to an API request.
āš”ļø Actions

Actions

ElementBravo TagWhere to label the tagTag TypeWhat is it?TutorialCan it be connected to dynamic data?
Remote action
[action:remote]
Any layer (except top-level & container)
Mobile Action
Allows an UI element to trigger an API request as an action.
Open video
[action:openvideo:https://google.com/test.mp4 or YouTube link] Or [action:openvideo]
Any layer (except top-level & container)
Mobile Action
The element will open a fullscreen video player with the video specified in the URL. Supports Youtube links and URL ending in .mp4.
Open phone dialog
[action:phone:+34123456789] Or [action:phone]
Any layer (except top-level & container)
Mobile Action
The element will open the native phone dialog with the phone number specified.
Open email dialog
[action:email:support@bravostudio.app] Or [action:email]
Any layer (except top-level & container)
Mobile Action
The element will open the native "compose an email" dialog with the email address specified as the "To:" address. iOS only: if there's no email account configured in the device, the default email application (such as Gmail) will be opened.
Open share dialog
[action:share:https://www.bravostudio.app] Or [action:share]
Any layer (except top-level & container)
Mobile Action
The element will open the native share dialog to share the URL specified.
Open URL
[action:openurl:https://www.bravostudio.app] Or [action:openurl]
Any layer (except top-level & container)
Mobile Action
The element will open the web browser on your phone with the URL specified.
Open PDF
[action:openpdf:https://google.com/test.pdf] Or [action:openpdf]
Any layer (except top-level & container)
Mobile Action
The element will open the PDF link you specified in a web browser.
Download file
[action:download:URL]
Any layer (except top-level & container)
Mobile Action
Allow app user to download files like images, videos & PDF to their phones.
Scan QR
[action:scanqr]
Any layer (except top-level & container)
Mobile Action
The element will open the phone camera to allow user to scan a QR code and open the link in a web browser.
QR scanner design (iOS only)
[qr:page-visor]
Top-level app page
Mobile Action
The design of this page will overlay the camera when you trigger the scan QR action.
Search & filter
[component:input-text][action:filter]
Text layer
Mobile Action
The text box will turn into a search field where users can filter items from a list on the same page by text content. āš ļø Must be inside a top bar container
Close modal page & popup page
[action:close]
Any layer (except top-level & container)
Mobile ActionMenu
Closes any modal page and returns to the previous screen. (ex: modal menu, scan QR screen)
Go back
[action:goback]
Any layer (except top-level & container)
Mobile Action
Goes back to the previous page
šŸŽ§ Play audio

Play audio

ElementBravo TagWhere to label the tagTag TypeWhat is it?TutorialCan it be connected to dynamic data?
Play audio
[action:play:URL] or [action:play]
Any layer (except top-level & container)
Mobile Action
Plays the MP3 audio track. When this element is visible, the pause element will be invisible, and vice versa.
See tutorial Covers all the tags listed here
Pause audio
[action:pause]
Any layer (except top-level & container)
Mobile Action
Pauses the MP3 audio track. This element will be invisible until user clicks the play element.
Play audio in background
[audio:background]
Any layer (except top-level & container)
Mobile Action
Audio files will continue to play when the app is open in the background. In order to stop the audio, users need to return to the page where the audio was started and tap pause. If this tag is not included, audio files will only play when its page is visible and will pause otherwise.
Loading audio indicator
[audio:loading]
Any layer (except top-level & container)
Mobile Action
The element that will be displayed from the moment the play element is clicked until the audio file is ready to be played, along with the pause element.
Current played time of audio
[audio:currenttime]
Text layer
Mobile Action
Displays the progressive playing time & the total time of the audio track.
Total time of audio
[audio:totaltime]
Text layer
Mobile Action
Displays the total time of the audio track.
āœØ Transitions

Transitions

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Transition: Slide
[transition:slide:left] [transition:slide:right] [transition:slide:up] [transition:slide:down]
Top-level app page
Transitions
2nd page slides over current page with a parallax effect.
Transition: Move
[transition:move:left] [transition:move:right] [transition:move:up] [transition:move:down]
Top-level app page
Transitions
2nd page slides over current page at a consistent speed.
Transition: Push
[transition:push:left] [transition:push:right] [transition:push:up] [transition:push:down]
Top-level app page
Transitions
2nd page pushes current page out of the screen.
Transition: Dissolve
[transition:dissolve]
Top-level app page
Transitions
2nd page fades in while the current page fades out.
Transition: Instant
[transition:instant]
Top-level app page
Transitions
There is no transition from page to page
šŸ’« Reveal page animations

Animations

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Contract
[animation:contract:light] [animation:contract:medium] [animation:contract:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Fade in
[animation:fadein:light] [animation:fadein:medium] [animation:fadein:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Expand
[animation:expand:light] [animation:expand:medium] [animation:expand:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Spin
[animation:spin:light] [animation:spin:medium] [animation:spin:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Slide Right
[animation:slideright:light] [animation:slideright:medium] [animation:slideright:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Slide Left
[animation:slideleft:light] [animation:slideleft:medium] [animation:slideleft:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Slide Top
[animation:slidetop:light] [animation:slidetop:medium] [animation:slidetop:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
Slide Bottom
[animation:slidebottom:light] [animation:slidebottom:medium] [animation:slidebottom:heavy]
Top-level app page
Animations page
Reveal animation for the element when opening the page
šŸ”„ Refresh page

Refresh page

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Page refresh: Pull to refresh
[refresh:pull]
Top-level app page
Mobile Action
User can refresh the screen with a pull-down gesture. For screens connected to external data.
Page refresh: always
[refresh:always]
Top-level app page
Mobile Action
Every time the page is opened, a remote call is done. For screens connected to external data.
Page refresh: once
[refresh:once]
Top-level app page
Mobile Action
Default behaviour. Remote (external data) pages are called once, the first time they are opened.
Page refresh: interval
[refresh:interval:<seconds>]
Top-level app page
Mobile ActionPage
Once the page is opened a remote call is done every <seconds>. For screens connected to external data.
šŸ•’ States Pages & Components & Loading

States

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Custom loading page
[state:loading]
Top-level app page
State
The app page will display in place of the default Bravo loading screen.
Multiple Custom loading page šŸ†• šŸ†• šŸ†•
[state:loading:SETNAME]
Top-level app page
State
Each different app page will display in place of the default Bravo loading screen. āš ļø Make sure the SETNAME is the same as the default page tag.
Default state page
[state:default:SETNAME] ex: [state:default:listpage]
Top-level app page
State
Indicates the page that utilizes the empty or error state. šŸ’” Need to add this tag in order for the empty/error state to show.
Empty state page
[state:empty:SETNAME] ex: [state:empty:listpage]
Top-level app page
State
The app page will display when the default page receives no content from the connected API. šŸ’” In order to trigger this empty state page, the response body coming from the API must contain an empty array property. āš ļø Make sure the SETNAME is the same as the default page tag.
Error state page
[state:error:SETNAME] ex: [state:error:listpage]
Top-level app page
State
The app page will display when the default page encounters an error from the connected API. āš ļø Make sure the SETNAME is the same as the default page tag.
Specific error state page
[state:error-<code>:SETNAME] ex: [state:error-404:listpage]
Top-level app page
State
The app page will display when the default page encounters a specific error code from the connected API. āš ļø Make sure the SETNAME is the same as the default page tag.
Group components state set
[state-set:SETNAME] ex: [state-set:start]
Group
State
This group will allow Bravo to make the relation between states in a component. āš ļø Make sure the SETNAME is the same as the default page tag. āš ļø To create states in Adobe XD, you must use the tags (as XD does not support variants)
Component state Default
[state:default]
GroupFrame group
State
The default component state will be displayed when no pressed or active action is done. āš ļø To create states in Adobe XD, you must use the tags (as XD does not support variants)
Component state Pressed
[state:pressed]
GroupFrame group
State
The pressed component state will be displayed when an app user is pressing on the state set component, and will stop displaying when the user stops pressing. āš ļø To create states in Adobe XD, you must use the tags (as XD does not support variants)
Component state Active
[state:active]
GroupFrame group
State
The active component state will be displayed ONLY on the menu pages. When an app user enter into specific page. āš ļø To create states in Adobe XD, you must use the tags (as XD does not support variants)
āš™ļø Settings & Misc.

Settings & misc.

ElementBravo TagWhere to label the tagTag TypeWhat is it?
Status bar mode
[statusbar:dark] [statusbar:light]
Top-level app page
Misc
The status bar on that app page will show as dark or light color. If you don't put any tag, the default is no status bar. āš ļø Not supported on the custom loading page.
Ignore
[skip]
Any layer
Misc
Bravo will not import this layer (nor its children layers).

šŸ“± App Stores Assets

App store assets

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
App icon
[asset:icon]
Top-level app page
App store asset
The thumbnail image for your Bravo project and the home screen icon for your final app.
Splash screen
[asset:splash]
Top-level app page
App store asset
The launch screen that displays while your app loads at first open. This will replace the default Bravo splash screen in your app bundles. (Note: this screen does not show in Bravo Vision)
šŸ” Login

Login: email & password

ElementBravo TagWhere to label the tagTag TypeWhat is itTutorial
Login page
[page:login]
Top-level app page
PageLogin
Indicates the page that we want to use as the login page.
Input field: email
[component:input-email]
Text layer
ComponentFormLogin
Indicates which field will be used as the user email input, needs to be a valid email, as is required by Firebase.
Input field: password
[component:input-password]
Text layer
ComponentFormLogin
Indicates which field will be used as a password input. Needs to be at least 6 characters.
Action: log in
[action:login:firebase-email-password]
Any layer (except top-level and container)
Mobile ActionLogin
Action of the UI element that does the login action with the filled information in the previous fields.
Action: register
[action:register:firebase-email-password]
Any layer (except top-level and container)
Mobile ActionLogin
Action of the UI element that does the register action with the filled information in the previous fields.
Action: reset password
[action:reset-password:firebase]
Any layer (except top-level and container)
Mobile ActionLogin
Action of the UI element to send the reset instruction email to the user to the email indicated on the same page.
Action: log out
[action:logout:firebase]
Any layer (except top-level and container)
Mobile ActionLogin
Log out action, can be added to any UI element inside the app.
šŸ”” Push notifications

Push notifications

ElementBravo TagWhere to label the tagTag TypeWhat is it?Tutorial
Enable push notifications
[action:enablenotifications]
Any layer (except top-level & container)
Mobile Action
Triggers the "enable notifications" alert in your app to allow users receive push notifications from your app.