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

button-1.jigx

# components/button-1.jigx
type: component.default
children:
  - type: component.card
    options:
      children:
        # Primary buttons
        - type: component.button
          options:
            title: Primary
            type: primary

        - type: component.button
          options:
            title: Primary with left icon
            type: primary
            icon:
              left: alarm-bell

        - type: component.button
          options:
            title: Primary with right icon
            type: primary
            icon:
              right: alarm-bell

        - type: component.button
          options:
            title: Primary with left & right icon
            type: primary
            icon:
              right: alarm-bell
              left: alarm-bell

        # Secondary buttons
        - type: component.button
          options:
            title: Secondary
            type: secondary

        - type: component.button
          options:
            title: Secondary with left icon
            type: secondary
            icon:
              left: alarm-bell

        - type: component.button
          options:
            title: Secondary with right icon
            type: secondary
            icon:
              right: alarm-bell

        - type: component.button
          options:
            title: Secondary with left & right icon
            type: secondary
            icon:
              right: alarm-bell
              left: alarm-bell

        # Tertiary buttons
        - type: component.button
          options:
            title: Tertiary
            type: tertiary

        - type: component.button
          options:
            title: Tertiary with left icon
            type: tertiary
            icon:
              left: alarm-bell

        - type: component.button
          options:
            title: Tertiary with right icon
            type: tertiary
            icon:
              right: alarm-bell

        - type: component.button
          options:
            title: Tertiary with left & right icon
            type: tertiary
            icon:
              right: alarm-bell
              left: alarm-bell

button-basic.jigx

Buttons-compact

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.

button-2.jigx

# components/button-2.jigx
type: component.default
children:
  - type: component.card
    options:
      children:
        # Primary button
        - type: component.button
          options:
            title: Primary
            type: primary
            isCompact: true

        - type: component.button
          options:
            title: Primary with left icon
            type: primary
            isCompact: true
            icon:
              left: alarm-bell

        - type: component.button
          options:
            title: Primary with right icon
            type: primary
            isCompact: true
            icon:
              right: alarm-bell

        - type: component.button
          options:
            title: Primary with left & right icon
            type: primary
            isCompact: true
            icon:
              right: alarm-bell
              left: alarm-bell

        # Secondary button
        - type: component.button
          options:
            title: Secondary
            type: secondary
            isCompact: true

        - type: component.button
          options:
            title: Secondary with left icon
            type: secondary
            isCompact: true
            icon:
              left: alarm-bell

        - type: component.button
          options:
            title: Secondary with right icon
            type: secondary
            isCompact: true
            icon:
              right: alarm-bell

        - type: component.button
          options:
            title: Secondary with left & right icon
            type: secondary
            isCompact: true
            icon:
              right: alarm-bell
              left: alarm-bell

        # Tertiary button
        - type: component.button
          options:
            title: Tertiary
            type: tertiary
            isCompact: true

        - type: component.button
          options:
            title: Tertiary with left icon
            type: tertiary
            isCompact: true
            icon:
              left: alarm-bell

        - type: component.button
          options:
            title: Tertiary with right icon
            type: tertiary
            isCompact: true
            icon:
              right: alarm-bell

        - type: component.button
          options:
            title: Tertiary with left & right icon
            type: tertiary
            isCompact: true
            icon:
              right: alarm-bell
              left: alarm-bell

buttons-compact.jigx

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

# components/button-3.jigx
 type: component.default
children:
  - type: component.card
    options:
      children:
        # Primary button
        - type: component.button
          options:
            title: Primary
            type: primary
            style:
        # Configure the button with a spinner to show it is busy
              isBusy: true

        - type: component.button
          options:
            title: Primary with left icon
            type: primary
            icon:
              left: alarm-bell
            style:
        # Configure the button with a spinner to show it is busy
              isBusy: true

        - type: component.button
          options:
            title: Primary with right icon
            type: primary
            icon:
              right: alarm-bell
            style:
         # Configure the button with a spinner to show it is busy
              isBusy: true

        - type: component.button
          options:
            title: Primary with left & right icon
            type: primary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
          # Configure the button with a spinner to show it is busy
              isBusy: true

        # Secondary button
        - type: component.button
          options:
            title: Secondary
            type: secondary
            style:
        # Configure the button with a spinner to show it is busy
              isBusy: true

        - type: component.button
          options:
            title: Secondary with left icon
            type: secondary
            icon:
              left: alarm-bell
            style:
          # Configure the button with a spinner to show it is busy
              isBusy: true

        - type: component.button
          options:
            title: Secondary with right icon
            type: secondary
            icon:
              right: alarm-bell
            style:
          # Configure the button with a spinner to show it is busy
              isBusy: true

        - type: component.button
          options:
            title: Secondary with left & right icon
            type: secondary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
           # Configure the button with a spinner to show it is busy
              isBusy: true

        # Tertiary button
        - type: component.button
          options:
            title: Tertiary
            type: tertiary
            style:
          # Configure the button with a spinner to show it is busy
              isBusy: true
        - type: component.button
          options:
            title: Tertiary with left icon
            type: tertiary
            icon:
              left: alarm-bell
            style:
              isBusy: true
        - type: component.button
          options:
            title: Tertiary with right icon
            type: tertiary
            icon:
              right: alarm-bell
            style:
           # Configure the button with a spinner to show it is busy
              isBusy: true
        - type: component.button
          options:
            title: Tertiary with left & right icon
            type: tertiary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
           # Configure the button with a spinner to show it is busy
              isBusy: true

button-busy.jigx

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

button-4.jigx

# components/button-4.jigx
type: component.default
children:
  - type: component.card
    options:
      children:
        # Primary button
        - type: component.button
          options:
            title: Primary
            type: primary
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Primary with left icon
            type: primary
            icon:
              left: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Primary with right icon
            type: primary
            icon:
              right: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Primary with left & right icon
            type: primary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        # Secondary button
        - type: component.button
          options:
            title: Secondary
            type: secondary
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Secondary with left icon
            type: secondary
            icon:
              left: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Secondary with right icon
            type: secondary
            icon:
              right: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Secondary with left & right icon
            type: secondary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

          # Tertiary button
        - type: component.button
          options:
            title: Tertiary
            type: tertiary
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Tertiary with left icon
            type: tertiary
            icon:
              left: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Tertiary with right icon
            type: tertiary
            icon:
              right: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

        - type: component.button
          options:
            title: Tertiary with left & right icon
            type: tertiary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
              # Disable the button to prevent it from being tapped.
              isDisabled: true

button-disabled.jigx

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

button-5.jigx

# components/button-5.jigx
type: component.default
children:
  - type: component.card
    options:
      children:
        # Primary button
        - type: component.button
          options:
            title: Primary
            type: primary
            # Combine the style properties to indicate that the button is both busy & disabled.
            style:
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Primary with left icon
            type: primary
            icon:
              left: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Primary with right icon
            type: primary
            icon:
              right: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Primary with left & right icon
            type: primary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        # Secondary button
        - type: component.button
          options:
            title: Secondary
            type: secondary
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Secondary with left icon
            type: secondary
            icon:
              left: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Secondary with right icon
            type: secondary
            icon:
              right: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Secondary with left & right icon
            type: secondary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        # Tertiary button
        - type: component.button
          options:
            title: Tertiary
            type: tertiary
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Tertiary with left icon
            type: tertiary
            icon:
              left: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Tertiary with right icon
            type: tertiary
            icon:
              right: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

        - type: component.button
          options:
            title: Tertiary with left & right icon
            type: tertiary
            icon:
              right: alarm-bell
              left: alarm-bell
            style:
              # Combine the style properties to indicate that the button is both busy & disabled.
              isDisabled: true
              isBusy: true

buttons-disabled-busy.jigx