Button

The Button component is an interactive element that allows you to:

Buttons are an important feature for the user experience:

Example

You can use the Button component to trigger a flow that allows you to get the user ID with the email. See How to trigger a flow from App Studio for more details.

Button component

Note: The Button component follows the WCAG 2.0 AA accessibility guidelines.

Properties

The following Button component properties are available:

Main

Property Description Required
Component ID Enter a unique name for the component. See Templating in components for more details. Yes
Text Enter the name you want to be displayed inside the button. Yes

Note: See Templating drop-down for more details on rendering dynamic content using Liquid.

Styles

Property Description Required
Size Select the size. Yes
Variant Select the appearance. Yes
Color Select the colour for the chosen variant. Yes
Icon before Select an icon from the drop-down. It displays to the left of the text. No
Icon after Select an icon from the drop-down. It displays to the right of the text. No
Hyperlink Add a URL. It opens in a new tab. No

Interactions

Property Description Required
Hidden Select the checkbox to hide the component in the end-user app. To hide it in the canvas, use the eye icon in the Layers panel. No
Add rule You can set rules to hide the component using Liquid. If no rules are set, the component will be hidden in all instances. No
Disabled Select the checkbox to disable the component in the end-user app. No
Add rule You can set rules to disable the component using Liquid. If no rules are set, the component will be disabled in all instances. No

Note: See Add rules to trigger properties for more information on setting rules for these properties.

Accessibility

Property Description Required
Aria label Enter a text that allows assistive technology to attach a label to the component. No
Title Enter a text that is displayed as a tooltip when hovering the mouse over the component in the end-user app. No

Events

The Button component supports the On click event. See Events and actions for more details. Button logic map