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

# Button

## Purpose

Quickly add professional looking buttons to your Power Apps with the lowcodera button component. Take advantage of several built-in features such as support for icons, predefined styles and different themes. Customize font sizes, button rounding and choose whether the button should be clickable

## Button Variations

![](/files/rxwsLOGnGqJlOqEqhc91)

‌There are several variations of the button with different configuration properties.

* Filled Buttons
* Outline Buttons
* Icons only Buttons‌  
* Fill and Outline Buttons with Icons

## Component Properties

The properties below are the main ones which change this components appearance and behaviors.

> See the [general properties for UI components](/component-properties/ui-component-properties.md) for a reference of wider properties.

<table data-header-hidden><thead><tr><th width="215">Control Property</th><th>Description</th><th width="168">Accepted Values</th><th width="150">Required</th></tr></thead><tbody><tr><td><strong>Control Property</strong></td><td><strong>Description</strong></td><td><strong>Accepted Values</strong></td><td><strong>Required</strong></td></tr><tr><td>Label</td><td>Property to set text for your button control</td><td>Text</td><td>Yes</td></tr><tr><td>Type</td><td>Property to choose button type.</td><td><p>Default</p><p>Outline</p></td><td>X</td></tr><tr><td>BorderRadius</td><td>Property to set Radius for our button.</td><td>Numeric</td><td>X</td></tr></tbody></table>

## Examples&#x20;

### Filled Buttons

![](/files/vtn5yUY6kV2FTXavDRiz)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **PRIMARY**
* [x] `Type`is to set as **Default**
* [x] `Theme`is to set as **Primary**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}

### Outline Buttons

![](/files/FZlrSJizdk6GzOUpqO2F)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **PRIMARY**
* [x] `Type`is to set as **Outline**
* [x] `Theme`is to set as **Primary**
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}

### Icons Only Buttons

![](/files/QpauYIAXJFOZy85tItTT)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **blank**
* [x] `Type`is to set as **Default**
* [x] `Theme`is to set as **Primary**
* [x] `BorderRadius` is to set as **100**
* [x] `FontSize` is to set as **20**
* [x] `IconName` is to set as [font-awesome](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free) icon name (e.g. comments, phone, map, globe, fire)
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}

### Fill and Outline Buttons with Icons

![](/files/uTiC2rFgkxN2vKhQGhvC)

{% tabs %}
{% tab title="Property Configration" %}

* [x] `Label`property is to set as **Promary / Info**
* [x] `Type`is to set as **Outline for Primary and Default for Info**
* [x] `Theme`is to set as **Primary**
* [x] `IconName` is to set as [font-awesome](https://fontawesome.com/v5.15/icons?d=gallery\&p=2\&m=free) icon name (e.g. comments, info)
* [x] All control properties can be left as default
  {% endtab %}

{% tab title="Event Configuration" %}
Once we configure our button and we want to write some events, we need to use **`OnChange`** Event of the button

```
Navigate(Home)
```

{% endtab %}
{% endtabs %}