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 |
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 |
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"
}
]
}
}
}
{
"component": "button",
"kind": "round",
"shape": "circle",
"icon": "far fa-user-group",
"options": {
"size": 12,
"padding": 4
},
"styles": {
"widget": {
"color": "#ffffff"
}
}
}