Button (Alpha)
The button custom component provides predefined options for designing the UI and tap functionality for a button. For example, your requirement might be a button showing an icon and text with a background color that can be used in multiple s in your app.
For steps on creating a custom component, see How to create a custom component.
You can use when and instanceId with component.button, add the properties before the options property. The available list of options is shown below.
Options | Value |
|---|---|
icon | left - select an icon from the provided list. right - select an icon from the provided list. |
isCompact | false true |
onPress | Multiple, use IntelliSense to view the list of available actions to call. The action is called when the button is pressed. |
style | isBusy - true/false isDisabled - true/false |
title | Provide the text to display on the button. You can use Localization to cater for multiple languages. |
type | primary - the main button that guides you to complete the most important action on the screen, for example, Approve. secondary - the option that shows when the ellipsis menu is tapped, for example, Reject. tertiary - the second option that shows when the ellipsis menu is tapped, for example, Rework. |
This example shows the custom component that uses compact buttons using the isCompact property inside a component.card. Compact buttons take up less space, making the screen cleaner and allowing more components to fit on the screen.
Example:
This example shows how to set buttons in a custom component to show they are busy by displaying a spinner using the isBusy property set to true inside a Card (Alpha). Examples:
This example shows how to disable a button on a custom component using the isDisabled: true property inside a Card (Alpha). Examples:
