---
description: Updates the solution once when clicked
---

# Button

## Description

Updates the solution once when clicked

{% tabs %}
{% tab title="Preview" %}
![](https://97674526-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOQQ5Dv56AckPkeQ6O9Rf%2Fuploads%2FhMYC7VRuRZa9Fza3w56M%2FUiPlus_Comp_Button.png?alt=media\&token=9f866804-1386-4ea2-b9bc-896f8b4ac70b)
{% endtab %}

{% tab title="Location" %}
**Name** | Ui Button

**Nickname** | Button

**Tab** | Ui

**Panel** | Control

**Division** | 1
{% endtab %}

{% tab title="Inputs" %}
**\*E** | **Element** (_Ui+ Element_) | An optional input for an Element.&#x20;

> If an Element is input it will be updated, if empty a new Element will be created.
>
> The input control must be of the same type as the component

**L** | **Label** (_Text_) | The control label

**I** | **Icon** (_Text_) | The control icon name or file path to the custom icon image.
{% endtab %}

{% tab title="Ouputs" %}
**E** | **Element** (_Ui+ Element_) | Ui Element Control.&#x20;
{% endtab %}

{% tab title="Mode" %}
_none_
{% endtab %}
{% endtabs %}

## Usage

![](https://97674526-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOQQ5Dv56AckPkeQ6O9Rf%2Fuploads%2F3P2zchTfJfEdGsgC3u2V%2FButtons.gif?alt=media\&token=ce3f9e57-b1e6-4109-9893-4bb77bba67e2)

The Icon input (I) can be a Material Design Icon name or a file path&#x20;

### Icon by Name

A known Material Design icon name can be provided in _CamelCase_&#x20;

[https://fonts.google.com/icons](https://fonts.google.com/icons)

<figure><img src="https://97674526-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOQQ5Dv56AckPkeQ6O9Rf%2Fuploads%2F2sUE9KjIZyJglU9pd1Jq%2FUI_Doc_Icons.gif?alt=media&#x26;token=8ec559ac-0323-4330-97b1-077f56af403f" alt=""><figcaption></figcaption></figure>

### Icon from Image

A full file path to an image file (png, jpg, jpeg, bmp) can be used for custom icons.

<figure><img src="https://97674526-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOQQ5Dv56AckPkeQ6O9Rf%2Fuploads%2F3XTJdoDDU1MuRSQfKtTJ%2FUI_Doc_Images.gif?alt=media&#x26;token=b9a8c2bf-c1f4-48d3-af7f-4c3bfd602e46" alt=""><figcaption></figcaption></figure>

&#x20;
