button (v2) (deprecated)
button
(v2) is deprecatedSupport 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 deprecatedTo 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.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: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). |