# Button

{% hint style="info" %}
Use Primitives prefabs to customize all the variants at once

Use the variants in your scene
{% endhint %}

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/tIbissrnMcGbeTXttWPS" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Left" %}

<figure><img src="/files/sdCElQ0b1JF69tD6U7WP" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Right" %}

<figure><img src="/files/I8HmUWgXXJaKRO1dermQ" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Only" %}

<figure><img src="/files/5BDBHZBw4N33ZxI5FROs" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Button structure in Unity

### Primitive Button prefabs

* Primitive Large
* Primitive Medium
* Primitive Small&#x20;

*Find them in FloatGrids/Design System/Customization/Primitive UI Components/Button Primitive*

### Button variants

*Find them in FloatGrids/Design System/UI Components/Button*

## Using icons in buttons in Unity

You can add icons to your button by activating the game object Icon Left/Right. It'll automatically align and respect margins.

{% embed url="<https://youtu.be/zvC9SW5glcg>" %}

## Customization in Unity

{% embed url="<https://youtu.be/M0EwV1bg4mk>" %}

* Edit the Primitive Button prefab to change size, spaces, corners and font styles to all buttons at once.&#x20;
* Use -Filled sprites to change corners. Ex: use corners-8px-Filled sprite in the primitive prefabs to change all the corners to 8px.
* Edit each variant to customize color and icons.&#x20;

{% hint style="info" %}
**Good to know**

Editing the corners in the Primitive Button prefabs won't work for Secondary and Outlined variants since they use outlined borders. You must edit the variants instead.
{% endhint %}

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.floatgrids.com/ui-components/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.