> For the complete documentation index, see [llms.txt](https://interopxyz.gitbook.io/ui-plus/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://interopxyz.gitbook.io/ui-plus/components/control/button.md).

# Button

## Description

Updates the solution once when clicked

{% tabs %}
{% tab title="Preview" %}
![](/files/PSVwekSpr27FSAb494X9)
{% 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. 

> 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. 
{% endtab %}

{% tab title="Mode" %}
*none*
{% endtab %}
{% endtabs %}

## Usage

![](/files/HyluXOAxyOMCAovnPNd4)

The Icon input (I) can be a Material Design Icon name or a file path 

### Icon by Name

A known Material Design icon name can be provided in *CamelCase* 

<https://fonts.google.com/icons>

<figure><img src="/files/ZJz3RkzY11bTIXwCNP0W" 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="/files/mvsV4ZQdnCXJtdlFcIeH" alt=""><figcaption></figcaption></figure>

&#x20;