Button
The Button component is an interactive element that allows you to:
- Trigger actions or events when selected. See Events and actions and the Events section for more details.
- Take the user to another URL.
Buttons are an important feature for the user experience:
- Use buttons to communicate to the user the available actions.
- Use buttons to allow users to interact with the page.
- Use the variants and colours to communicate to the user the importance and category of each of the actions.
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.
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.