System StatusSamples on GitHub

Button (Alpha)

This feature is currently in its Alpha stage of development.

  • As an early version, it may not include all planned functionalities and is subject to significant changes based on ongoing development and user feedback.

  • In this phase, the feature may contain bugs or behave unpredictably.

  • Jigx recommends using standard, fully supported components until this feature has been fully tested and refined.

  • We encourage you to provide feedback and report any issues to help us improve and refine the feature for future releases.

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 jigs in your app.

For steps on creating a custom component, see How to create a custom component.

Configuration options

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 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 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.

Example and code snippets

The examples use a set of custom components called sections. The sections are for titles, spacing, and context. The sections code is available on GitHub.

Buttons-basic

This example shows the custom component that uses the button's basic form. Scroll down for more examples of how you can implement buttons.

Examples:

  1. See the section component example in GitHub.

  2. See the custom component example in GitHub.

  3. See the jig example in GitHub.

Buttons basic
Buttons basic

Buttons-compact

Compact buttons
Compact buttons

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:

  1. See the section component example in GitHub.

  2. See the custom component example in GitHub.

  3. See the jig example in GitHub.

Buttons-busy

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:

  1. See the section component example in GitHub.

  2. See the custom component example in GitHub.

  3. See the jig example in GitHub.

Button busy
Button busy

Buttons-disabled

Button disabled
Button disabled

This example shows how to disable a button on a custom component using the isDisabled: true property inside a Card (Alpha).

Examples:

  1. See the section component example in GitHub.

  2. See the custom component example in GitHub.

  3. See the jig example in GitHub.

Buttons-disabled and busy

This example shows a custom component with a combination of the buttons as disabled and busy using the button style: properties, isDisabled: true and isBusy: true.

Examples:

  1. See the section component example in GitHub.

  2. See the custom component example in GitHub.

  3. See the jig example in GitHub.

Buttons disabled & busy
Buttons disabled & busy
PreviousCustom components (Alpha)NextCard (Alpha)

Last updated

Was this helpful?