# UI

**Game Creator** comes with some handy components that makes interacting with **UI** elements a breeze.

{% hint style="info" %}
It is recommended that you are at least familiar with **Unity**'s **UI** system. Check out [Unity Learn](https://learn.unity.com/) for more information.
{% endhint %}

All **Game Creator UI** components can be found at **`Create → Game Creator → UI`** section at the Hierarchy Panel. 

## Actions Button

Actions Button look exactly the same as native Unity buttons, except that there's an Actions component at the end of it that will be executed when the button is clicked.

![(Game Creator Button that prints "Hello World" when clicked)](https://2174264233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAqwYovmUPn5V6CMeID%2F-LerIc4yORv33XvVgSko%2F-LerJXNFFQvgssW4Aj1r%2Fui-button.jpg?alt=media\&token=8cff3b67-44f0-495e-9545-465f54164b75)

## Input Field

Games usually allow the user to input a text. For example, the name of the player. You can easily store the value of an **Input Field** into a **Variable** through the **Game Creator Input Field**. 

![(Input Field with no variable linked)](https://2174264233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAqwYovmUPn5V6CMeID%2F-LerIc4yORv33XvVgSko%2F-LerLHjlIAbcAbOtmVpn%2Fui-inputfield.jpg?alt=media\&token=e0d2e1fc-a7a7-4fb4-bcb0-8627e9d82454)

This component looks exactly like the native homonymous but also has a **Variable** selector at the end.

## Slider

A **Slider** allows the user to select a value between a min and a max value. The **Game Creator Slider** allows to sync this value with a **Variable**.

![(Game Creator Slider with no Variable assigned)](https://2174264233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAqwYovmUPn5V6CMeID%2F-LerIc4yORv33XvVgSko%2F-LerMSJidOBVldq517a5%2Fui-slider.jpg?alt=media\&token=3e6a2e68-25f2-4477-9abb-1097c02c4e53)

The **Slider** value is updated when the **Variable** value is changed. The **Variable** value is also updated when the **Slider** value changes.

## Toggle

The **Toggle** component allows to set a **Variable** to *True* or *False* by checking or unchecking the box.

![(Toggle Variable not assigned to any Variable)](https://2174264233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAqwYovmUPn5V6CMeID%2F-LerIc4yORv33XvVgSko%2F-LerOcTU3kl30wypdSK0%2Fui-toggle.jpg?alt=media\&token=1d578df9-17b7-4d6f-b26d-58fd8e19221d)

Game Creator allows to link this value to a Boolean Variable.

## Text Localized

Allows to print a **Localized Text** in a native-like **Text** component. The text is automatically updated if the user decides to change the game language.

![(Text Localized component)](https://2174264233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAqwYovmUPn5V6CMeID%2F-LerIc4yORv33XvVgSko%2F-LerMp5BWrmkz1wUAaQo%2Fui-text-localized.jpg?alt=media\&token=c8a8e5bc-a7ef-44fb-b259-ba420df5a900)

To enable text localization, click on the **Enable Translation** button and a new entry will appear in the **Localized Texts** list. For more information about **Localized Texts** see its [section](https://docs.gamecreator.one/game-creator/systems/localization).

## Text Variable

The **Text Variable** component looks exactly like the **Unity** **Text** component, except that its content allows to print the value of a **Variable**. The **Variable** value will replace the **`{0}`** symbol.

![(Text Variable which prints the health of the Player)](https://2174264233-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAqwYovmUPn5V6CMeID%2F-LerIc4yORv33XvVgSko%2F-LerNa7bTCGDUYhEsK7K%2Fui-text-variable.jpg?alt=media\&token=336275da-5217-4595-8a5c-31fb68f89a9f)

For example, if the text content is `"player health is {0}"` and the **Text Variable** component is linked to the "health" Variable, which has a value of 100, the runtime text will be `"player health is 100"`