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 JS.
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 |
Note: The Align property in Columns is set to Stretch by default, so the component will take all the available width. To change that, set the Align property to Left, Center or Right.
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 JS. 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 JS. 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.