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.
The text that will appear on the button.
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 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.
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 "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.
The input set to satisfy the variable condition in order for the outcome to occur (True, False, 1, 2, 3, etc.).
Add a Button to Forms in order for users to successfully submit the form upon completion.
Customize the look and feel of a button by adjusting its size, color, and placement.
When styling, we use CSS pixel guidelines, TRBL (Top, Right, Bottom, Left), to customize padding, margins, and border widths.
TRBL Design Table Example
|1px||1px on all four sides|
|1px 2px||Top and bottom are 1px, left and right are 2px|
|1px 2px 1px||Top is 1px, right and left are 2px, and bottom is 1px|
|1px 2px 3px 4px||Top is 1px, right is 2px, bottom is 3px, and left is 4px|
Click here for more information on CSS guidelines.