button (v2) (deprecated)
button
(v2) is deprecated
Support for button
v2 has been dropped from the JourneyApps Runtime in version 4.70.0. Please upgrade to button
v3 to ensure that your app remains compatible with the latest versions of the JourneyApps Runtime.
menu
is deprecated
To maintain backward compatibility, menu
buttons are automatically converted to individual buttons.
Version compatibility
button
v2 was introduced in version 4.34 of the JourneyApps Container.
You can activate the feature for your app by enabling the Buttons 2.0 feature flag in OXIDE (via App Settings).
Supported attributes (the same as button
v1):
Option | Required | Details |
---|---|---|
| required | Text to display on the button. It can be a format string to make the text dynamic. To have no label, specify |
| optional | Function to call when the button is pressed - either a JavaScript/TypeScript function or a navigation function. |
| optional | The icon to display on the button, left of the text. The icon can be a Font Awesome icon or an Ionicons icon. |
| optional | Set to |
| optional | Setting |
| optional | Controls whether the component is hidden or shown. The argument specified to |
| optional | The opposite of |
| optional |
|
| optional | Text to display when the user clicks on a disabled button |
Attributes introduced in version 4.34.0 of the JourneyApps Container:
Option | Required | Details |
---|---|---|
| optional |
|
| optional | The main color of the button. Defaults to |
| optional | The color of the button's text. Valid values include hex values, named colors or the result of a function, e.g. |
| optional | Whether the icon should be on the text's left-hand-side or the right-hand-side. Valid options include |
| optional | Sets the icon's color. Can be a named color, like |
Good UX practice is to only have one primary call-to-action on a view. Carefully select the most important action on your view and make that a solid
button.
Button Group
Groups buttons in a horizontal row, e.g.:
The above code will be displayed as:
With the split
mode selected, buttons will render like this:
With the collapsed
mode selected, buttons will render like this:
Configuration
The <button>
tag accepts the following configuration options:
Option | Required | Details |
---|---|---|
| optional | Setting |
| optional |
|
| optional | Controls whether the component is hidden or shown. The argument specified to |
| optional | The opposite of |
Last updated