Button

The Button Component adds an actionable button to the Experience. Button's can be customized to perform a multitude of actions: link to a URL, another Experience, an action variable, or submit a form. 

Options 

Button Text

The text that will appear on the button. 

Action

Program the button to direct users to a specified URL after tapping. 

Connect two Studio Experiences with one tap using the other Experience's ID. 

Local Variable 

Local Variables keep track of user interactions on their device. They are cached on a users device and are present until the user clears their devices browser data. Once a user taps the Button, the predefined local variable, once met, will trigger the set action. 

Variable Name

The naming convention for the variable condition. Make sure the Variable Names and Values are consistent across all Components and Wrappers involved in their respective conditions. 

Variable Operation

Variable Operation "Set" will create the variable once it has been loaded. Variable Operation "increment" or "decrement" will count how many times a given action has been tapped and will deploy an action variable once a user has tapped a set number of times.

Value

The input set to satisfy the variable condition in order for the outcome to occur (True, False, 1, 2, 3, etc.).  

Form Submit

Add a Button to Forms in order for users to successfully submit the form upon completion. 

Styles

Customize the look and feel of a button by adjusting its size, color, and placement.

Styling Guidelines

When styling, we use CSS pixel guidelines, TRBL (Top, Right, Bottom, Left), to customize padding, margins, and border widths.

TRBL Design Table Example 
1px1px on all four sides
1px 2pxTop and bottom are 1px, left and right are 2px
1px 2px 1pxTop is 1px, right and left are 2px, and bottom is 1px
1px 2px 3px 4pxTop is 1px, right is 2px, bottom is 3px, and left is 4px

Click here for more information on CSS guidelines.