# 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="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FZwPorAu6zmO4PcubHjLX%2FFloatGrids%20XR%20Buttons.png?alt=media&#x26;token=29632afa-981d-4aaa-ae86-aef82b3442cf" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Left" %}

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FEmm7UIs8DjWIoloN9aMy%2FFloatGrids%20XR%20Buttons%20Icon%20Left.png?alt=media&#x26;token=f1792a99-24fd-4df0-9cee-b434c6c69772" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Right" %}

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2F6vsLv5XNXfrali73GUU2%2FFloatGrids%20XR%20Buttons%20Icon%20Right.png?alt=media&#x26;token=6ed73351-c5f0-41e6-b356-3b356d557868" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon Only" %}

<figure><img src="https://2267467073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJTYM2H0ve8KmqJHIoHBt%2Fuploads%2FWtUxal84FiTVMeGjoz2c%2FFloatGrids%20XR%20Icon%20Buttons.png?alt=media&#x26;token=f376dfe3-6dc9-4681-86d1-9d5e5a130948" 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 %}

###