Button
The Button component is an interactive element that allows you to:
- Trigger actions or events when selected. See Logic drawer 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 properties
The following table describes the main properties of the component.
| 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 properties
The following table describes the styles properties of the component.
| 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 properties
The following table describes the interactions properties of the component.
| 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 properties
The following table describes the accessibility properties of the component.
| 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 Logic drawer for more details.
