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

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

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.

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

Last modified 6mo ago