# Customizing Component Appearance

Every Form Builder Components have a styling option; some of them are unique. This chapter covers the following Component's styling options:

* Button 
* File Input

{% hint style="info" %}
Horizontal alignment, horizontal and vertical placement, and form cell resizing are common settings in every component. 
{% endhint %}

### Button Customization

To customize a button component:

* Drag and drop a button component/function to the Form Area 
* Click on the **Field Settings** button

<div align="left"><img src="https://content.gitbook.com/content/3pFlOnLkCTAp9vl2euIJ/blobs/wSnYGw8aY0yrntXkFxIK/image.png" alt="Field Settings of a Button Component"></div>

As the image above shows that you can customize the Background Size, Color, and Corner Radius along with the Text Size and Color.

<div align="left"><figure><img src="https://content.gitbook.com/content/3pFlOnLkCTAp9vl2euIJ/blobs/C1la73VI3gFhmTjOOzuc/image.png" alt=""><figcaption><p>Form Builder Example</p></figcaption></figure></div>

The image above shows an example of how you can utilize Button Components in your production pipeline.

### File Input Customization

To customize a File Input component:

* Drag and drop a File Input component to the Form Area.
* Click on the folder icon and select an image

<div align="left"><figure><img src="https://content.gitbook.com/content/3pFlOnLkCTAp9vl2euIJ/blobs/YVD7LZjJXCUFxdSFa5lD/image.png" alt=""><figcaption><p>Compact View Turned Off</p></figcaption></figure></div>

Your file Input component should look similar to the above example. Now:&#x20;

* Click on the **Field Settings** button
* Select the **Compact View** option and click <mark style="color:purple;">**`OK`**</mark>

<div align="left"><figure><img src="https://content.gitbook.com/content/3pFlOnLkCTAp9vl2euIJ/blobs/2l9P1YXF8ecyvxCeHZpd/image.png" alt=""><figcaption><p>Compact View Turned On</p></figcaption></figure></div>

As the above image shows, the compact view option allows you to check your visuals in wider resolution.

{% hint style="info" %}
Clicking on the image inside the File Input property pops up the **Asset Browser**.&#x20;
{% endhint %}