Button

Live demo

Standard button

Renders a button that executes a standard action.

Node name : button

Attributes

Attribute	Type	Required	Default value	Description
type	string (add, close, refresh, remove, save)	true		Button type.
focused	bool	false	false	Value indicating whether the component is focused.
animated	bool	false	true	Value indicating whether the button is animated.
content-align	string (start, center, end)	false	start	The position of the inner content shown within the button.

Example

<button type="add" />
<button type="close" />
<button type="refresh" />
<button type="remove" />
<button type="save" />

Action button

Renders a button that executes a UI view action.

Node name : button (type = action)

Attributes

Attribute	Type	Required	Default value	Description
action-name	string	true		UI view action name.
variant	string (default, positive, primary, danger, ghost, ghost-positive, ghost-primary, ghost-danger, ghost-positive-subtle, ghost-primary-subtle, ghost-danger-subtle, link, unstyled)	false	action style	Variant. Overrides the action's style.
size	string (extrasmall, small, medium, large, extralarge)	false	action size	Size. Overrides the action's size.
icon	string	false	action icon	Icon. Overrides the action's icon.
label	string	false	action caption	Label. Overrides the action's caption.
badge	string	false	action badge	Value of the badge.
badge-severity	string (none, info, positive, warning, danger)	false	action severity	Severity of the badge. Defaults to the action's badge severity.
content-align	string (start, center, end)	false	start	The position of the inner content shown within the button.
direction	string (horizontal, vertical)	false	horizontal	Direction in which the button elements (icon and text) are positioned.
focused	bool	false	false	Value indicating whether the component is focused.
animated	bool	false	true	Value indicating whether the button is animated.

Example

<button type="action" action-name="UIViewActionName"/>
<button type="action" action-name="UIViewActionName" direction="vertical" />
<button type="action" action-name="UIViewActionName" icon="add" label="Custom label" variant="primary" />

<!-- Custom inner content (replaces the action's label/icon) -->
<button type="action" action-name="UIViewActionName" content-align="center">
    <image name="Entity" />
    <text>InnerText</text>
</button>

disabled and loading are driven by the action's availability and execution state and cannot be set on an action button; using them emits a generation warning.

Unbound button

Common attributes

Attribute	Type	Required	Default value	Description
variant	string (default, positive, primary, danger, ghost, ghost-positive, ghost-primary, ghost-danger, ghost-positive-subtle, ghost-primary-subtle, ghost-danger-subtle, link, unstyled)	false	default	Variant.
size	string (extrasmall, small, medium, large, extralarge)	false	medium	Size.
propagate-click	bool	false	false	Value indicating whether the click should propagate.
focused	bool	false	false	Value indicating whether the component is focused.
direction	string (horizontal, vertical)	false	horizontal	Direction in which the button elements are positioned.
icon	string	false		Icon.
label	string	false		Label.
badge	string	false	string	Value of the badge.
badge-severity	string (none, info, positive, warning, danger)	false	none	Severity of the badge.
disabled	bool	false	false	Value indicating whether the button is disabled.
loading	bool	false	false	Value indicating whether the button is in loading state.
animated	bool	false	true	Value indicating whether the button is animated.

Method button

Renders a button that executes a UI view method.

Node name : button (type = method)

Attributes

Attribute	Type	Required	Default value	Description
method-name	string representing the name of a method that takes at most one parameter.	true		UI view method name.

Warning

The parameter passed to the method that is called by the button changes depending on the parent nodes containing the button :

• When one of the parent components of the button defines a contextual variable (for example the $Item of a Repeat component) then the method is called with this variable as a parameter.
• Otherwise, if in a UI view or a context, the method is called with the current item of its datasource as a parameter.
• Otherwise, the method is called without parameters (when in a UI component for example).

Example

<button type="method" method-name="HandleButtonClick" variant="default" size="medium" focused="true" icon="ButtonIcon" label="Button caption" />

<button type="method" method-name="HandleButtonClick" variant="default" size="medium" focused="true">
  <image name="ButtonIcon" />
  <text>Button caption</text>
</button>

In this example, the rendered button will display an icon and a caption horizontally aligned. Once the button is rendered on screen, it will take the focus because of the focused property.

If you want to display the text bellow the icon like in the toolbar, you can set direction to vertical :

<button type="method" method-name="HandleButtonClick" variant="default" size="medium" focused="true" direction="vertical">
  <image name="ButtonIcon" />
  <text>Button caption</text>
</button>

Toggle overlay button

Renders a button that toggles an overlay.

Node name : button (type = toggle-overlay)

Attributes

Attribute	Type	Required	Default value	Description
overlay-id	string	true		Overlay identifier

Example

<button type="toggle-overlay" overlay-id="MyModal" variant="default" size="medium" focused="true" icon="ButtonIcon" label="Button caption" />

OpenView button

Renders a button that opens a UI view.

Node name : button (type = openView)

Attributes

Attribute	Type	Required	Default value	Description
ui-view-name	string	true		Name of the UI view to open. Can be a literal name, or a dynamically bound value written directly as the attribute's value, e.g. ui-view-name="@Fields.TargetViewName".
customize-method-name	string representing the name of a method (defined on the view) that takes the NavigationOptions about to be used as its parameter.	false		UI view method name called to customize the navigation (for example to set an id) before it happens. Must reference a synchronous method.

Note

When the EnableNavigationLinks behavior is enabled for the cluster and the navigation is eligible, this button is rendered as a real link: a simple click still navigates in the application, while a Ctrl or Cmd click, or a middle click, opens the view in a new tab. A navigation that opens a popup, a nested frame or an explicit container, that is subject to a custom onNavigating rule, or that is triggered while a modal is open, is not eligible and works on click only, like every navigation when the behavior is disabled.

The method named by customize-method-name is also run to compute the link. It must be synchronous and without side effects, and must compute its options only from the NavigationOptions and the item of its row, never from DatasourceCurrent or any other state that can change between the computation of the link and the click. A link keeps the target view, WithId and WithUrlParameter: the filter and the parameters set with WithFilter or WithParameter are lost when the view is opened in a new tab.

Example

<button type="openView" ui-view-name="CustomerDetailUI" customize-method-name="CustomizeCustomerDetailNavigation" />

<button type="openView" ui-view-name="SettingsUI" />

Inner content

Button nodes can have an inner content and it can be aligned to either side of the button, or centered.

For backward compatibility, by default, the content is aligned to the left hand side.

Example

A button taking the whole available horizontal space:

<button type="action" action-name="BigFatAction" layout:width="fill" content-align="center">
    <image name="BigFatAction" />
    <text>Big, fat action</text>
</button>