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

OptionRequiredDetails

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:

OptionRequiredDetails

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:

OptionRequiredDetails

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

Last updated