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, link)	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, link)	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" />

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>