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
label	required	Text to display on the button. It can be a format string to make the text dynamic. To have no label, specify label="".
on-press	optional	Function to call when the button is pressed - either a JavaScript/TypeScript function or a navigation function.
icon	optional	The icon to display on the button, left of the text. The icon can be a Font Awesome icon or an Ionicons icon.
validate	optional	Set to true to run validations when this button is pressed (in other words, check whether any required input fields are not empty), before running the action or opening the link. Set to false to disable validations when this button is pressed. The value can also be the result of a function (e.g. $:shouldBeValidated()). Defaults to true.
type	optional	Setting type="primary" will cause the button to be displayed in the top right corner on tablets.
show-if	optional	Controls whether the component is hidden or shown. The argument specified to show-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or field that can be a string, number, object, etc. that evaluates to false or evaluates to true. If the component also specifies required="true", but it is hidden, the validation will be ignored/skipped.
hide-if	optional	The opposite of show-if (see above).
disabled	optional	true, false, a view variable (e.g. my_var) or the result of a function (e.g. $:shouldBeDisabled()). When resolved to true, the button is grayed out and not clickable
disabled-message	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
style	optional	outline or solid. Defaults to outline
color	optional	The main color of the button. Defaults to primary. Valid values include hex values, named colors or the result of a function, e.g. color="positive"
text-color	optional	The color of the button's text. Valid values include hex values, named colors or the result of a function, e.g. color="positive-text". Defaults: outline buttons: text-color defaults to color. solid buttons: text-color defaults to (a) the -text counterpart of a named color, if a named color was provided in color, or (b) to #333333 or #FFFFFF (white), depending on which option gives the best contrast with the background color.
icon-position	optional	Whether the icon should be on the text's left-hand-side or the right-hand-side. Valid options include left or right. Defaults to left.
icon-color	optional	Sets the icon's color. Can be a named color, like primary or a hex value, like #008000 or the result of function. Return null to use the icon's default color. Added in version 4.36.0 of the JourneyApps Container.

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

<button-group>
<!-- Add buttons here. A maximum of 3 buttons is allowed in a row -->
<button label="Previous" icon="fa-arrow-left" />
<button label="Next" style="solid" icon="fa-arrow-right" icon-position="right" />
</button-group>

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
type	optional	Setting type="primary" will cause the button-group to be fixed to the bottom of the view.
mode	optional	row, split or collapsed. Setting mode="split" will cause the button-group to configure itself to show only one button with a dropdown for all other buttons (if there are other buttons). Defaults to row. collapsed is the only mode for narrow mobile devices but can be used for all platforms with this setting. Useful when, for example, buttons have labels that are very long.
show-if	optional	Controls whether the component is hidden or shown. The argument specified to show-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or field that can be a string, number, object, etc. that evaluates to false or evaluates to true.
hide-if	optional	The opposite of show-if (see above).