button (v1) (deprecated)

button (v1) is deprecated

Support for button v1 has been dropped from the JourneyApps Runtime. Please upgrade to button v3 to ensure that your app remains compatible with the latest versions of the JourneyApps Runtime.

Three variations of buttons are available in JourneyApps:

1. Regular buttons

2. Menu buttons - which is a button placed inside a menu component.

3. Primary button - which is fixed to the bottom of the view and spans its full width.

Buttons can be used to trigger functions:

1. Calling a JavaScript/TypeScript function - by specifying on-press="example_function()".

2. Calling link functions directly - by specifying on-press="link.view_path()".

Using Buttons

Buttons should be used when you need a user to perform a specific action on your view. They should be worded clearly so that users know what will happen when they click it. In general, a view shouldn't contain too many buttons, otherwise they start to compete with one another and overwhelm the user. If you find yourself using buttons everywhere, you may need to determine whether your view has too many actions on it, or whether a list would work better instead.

Buttons are appropriate for actions such as "create", "add", "new", "edit", "update", "complete", "save", "proceed", "log in", etc.

Regular Button

<button label="Press Me" on-press="sayHello" />

Menu Button

<menu>
    <button label="Search for Item" subtext="Search through items by name" icon="icons/search-icon.png" on-press="sayHello" />
</menu>

Primary Button (Special Case)

A special case of the Regular Button is also available. This button is displayed on the bottom of the screen and spans the entire width (excluding sidebar). Use this button when your page has one main call-to-action. These buttons work well for actions like "Done" / "Complete" / "Log in" / "Proceed".

A button can be made into a Primary button by adding type="primary" to its tag:

<button type="primary" label="I Have Started Work" on-press="started()" />

Configuration

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.
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 (Available from JourneyApps Container v4.23.0)
disabled-message	optional	Text to display when the user clicks on a disabled button (Available from JourneyApps Container v4.23.0)

Configuration specific to Menu Buttons

The following apply only to menu buttons (i.e. button inside a menu component).

Option	Required	Details
icon	optional	The icon to display on the button, left of the text. The icon can be a Font Awesome icon, an Ionicons icon or the path of a custom icon (icons upload using the Assets workspace in OXIDE)
subtext	optional	Text to display below the normal button text, in a smaller font. It can be a format string to make the text dynamic.

See Also

The menu component can be used to render buttons in a menu. However, the recommended way of creating menus is now using the list component.