Button

A button that will perform the defined action when user tap/click on it

Name	Description
component	button
text	text for the button, if icon is not null, text will be used
icon	if child is null and icon is not null, icon will be used
kind	kind of button, primary, outlined, round, text, flat
shape	if this is set to circle, the shape of the button will be a circle; round will automatically be a circle
action	action to perform when user tap/click on the button, this can be text such as close and platform will implement the action or an action object. Some valid actions are createDispatch, dispatch, etc, with each action provided proper params
validation.rule	optional rule to be evaluated when this component is used as part of form widget. When provided, it will subscribe to change and will evaluate the rule, if the result is false, button is disabled
options	options for the button
child	if this is not null, this will be used as a child of the button, child can be any markup component (e.g. text, icon, etc)

Options

Name	Description
size	icon size
buttonSize	button size (for round buttons)
padding	padding for icon buttons
elevation	control elevation for some button styles
dirtyCheck	optional, if this button is within a form and we don't want to check for dirtyness to have this button enabled, set this flag to false
style	primary, outlined for round buttons

Style object

Name	Description
widget.color	optional color for the button
widget.fillColor	optional fill color (background) for the button
widget.hoverColor	optional fill color (background) for the hover button

Actions

See Actions for more details

Name	Description
close	close the current screen
object	if object is a json object that has target attribute, will invoke the target (see Actions targets below)

Action targets

Name	Description
invokeScript	invoke a script with options as jsonParams
payment	process payment

Examples

{
  "component": "button",
  "text": "Open dispatch",
  "kind": "primary",
  "styles": {
    "fontWeight": "bold",
    "color": "#ff0000"
  },
  "onClick": {
    "target": "invokeScript",
    "options": {
      "handle": "cart-action",
      "onClick": "add",
      "productId": "7a9b0453-14bd-44df-b6c8-f368f809c2bc",
      "offeringId": 8a3b2a24-14bd-44df-b6c8-f368f809c2bc
    }
  }
}

Payment example

{
  "onClick": {
    "target": "payment",
    "options": {
      "title": "Checkout",
      "message": {
        "confirmTitle": "Confirm your order",
        "confirmBody": "Subtotal: {values.total|numeral:$0.00}",
        "thankyou": "Payment is processed!"
      },
      "data": {
        "amount": "{values.total}",
        "ccy": "USD",
        "symbol": "$"
      },
      "save": {
        "tracker": "6a8a5db9-ab7d-4b5a-b488-38458cd21c71",
        "body": "Your order is submitted!",
        "description": "The glam daily cart checkout"
      },
      "providers": [
        {
          "providerName": "Stripe",
          "key": "pk_test_CyocRGjl6i8mTTpydniZVujq",
          "handle": "stripe-test"
        }
      ]
    }
  }
}

Small round button

{
  "component": "button",
  "kind": "round",
  "shape": "circle",
  "icon": "far fa-user-group",
  "options": {
    "size": 12,
    "padding": 4
  },
  "styles": {
    "widget": {
      "color": "#ffffff"
    }
  }
}