# Button

The **Button** **GUI** **Object** is a simple icon to attach **Logic** to. It can be configured so that something occurs when it is clicked in tandem with using the [**Mouse Nodes**](https://docs.incari.com/incari-studio/toolbox/events/mouse). A **Button's** text, placement, and size can be altered using the [**Attributes**](#attributes).

![Button.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-512dc11e1611d03e1cc2fd54c55705cbe48f906f%2Fbuttonimage120241.png?alt=media)

![Button with Text.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-36a5a326a59a61c190077ab65c2483e7248da7f1%2Fbuttonimage220241.png?alt=media)

## Attributes

The **Object's** **Attributes** can be used to fully customize the **Object**. Explained below, they are:

* [**Transformation**](#transformation)
* [**Text**](#text)
* [**Font**](#font)
* [**Style**](#code)
* [**Tag**](#tag)

### Transformation

![Transformation Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-07b90a69bf795fcaa033ee87a7883ad8de28bc9b%2Fbuttonimage320232.png?alt=media)

The `Transformation` **Attributes** deal with placement, rotation, and size in *XY* space. More information can be found [here](https://docs.incari.com/incari-studio/objects-and-types/attributes/common-attributes/transformation).

### Text

The `Text` **Attributes** customize the textual elements of a **Button**.

There are two ways the `Text` Attribute can be incorporated in the **Object**. That is either as `Static Text` or `Translation`. This can be switched using the text or translation icons to the right, in that order.

![Static Text and Translation.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-981fcfec4b57d2dca4efa0b62b3bde4612b662f3%2Ftextvstranslation.png?alt=media)

#### Static Text

![Static Text Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-2d490cdf85da5d8f97c3a3fc2da93a3d887591b0%2Fstatictextatts20241.png?alt=media)

When `Static Text` is selected, the **Attributes** are:

* `Text` is the text itself which will be displayed on the **Button**. Please note that only text which fits within the confines of the **Button** will be displayed. Size the **Button** accordingly.
* `Color` decides the color of the **Button's** text.
* `Transform` can easily change certain text aesthetics without requiring the user to change the `Text` **Attribute** itself. `Capitalize` makes the first letter capital, `uppercase` makes all letters capital, and `lowercase` makes all letters lowercase.

#### Translation

![Translation Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-107cd87d84bb2944b4d85f10e352fed8041708c8%2Ftranslationatts20241.png?alt=media)

When `Translation` is selected, the **Attributes** are:

* `Translation` lets the user choose the key of the current language (which is established in the [**Project Settings**](https://docs.incari.com/incari-studio/modules/project-settings/localization)). In the image above, the selected key is `phrase`.
* `Color` decides the color of the **Button's** translation.
* `Transform` can easily change certain text aesthetics without requiring the user to change the `Translation` **Attribute** itself. `Capitalize` makes the first letter capital, `uppercase` makes all letters capital, and `lowercase` makes all letters lowercase.

### Font

![Font Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-afc0b4325e55720c33c24fb83974a1548bfa02bd%2Ffontatts20241.png?alt=media)

The `Font` **Attributes** focus on the details of the **Button's** text. Please note that while **Buttons** are capable of handling [*variable fonts*](https://docs.incari.com/incari-studio/modules/project-settings/fonts#variable-fonts), only the default style will be used, as the configurable **Attributes** are not available for this **Object**.

* `Family` offers two different font types: `Manrope` and `Source Code Pro`. More fonts can be added by the user in [**Project Settings**](https://docs.incari.com/incari-studio/modules/project-settings/fonts).
* `Size` determines the size of the font in pixels.

### Style

![Style Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-5b23a616c1b15c257a46a59fc8ba49372b9c7453%2Fstyleattsbutton20241.png?alt=media)

The `Style` **Attributes** allow for more customizability. This can override any stylesheet provided in the [**Project Settings**](https://docs.incari.com/incari-studio/modules/project-settings/style) or a [**Scene2D**](https://docs.incari.com/incari-studio/objects-and-types/project-objects/scene2d).

To address these in the **Logic**, please refer to the [**Object 2D Nodes**](https://docs.incari.com/incari-studio/toolbox/incari/object2d).

* `Background Color` determines the color of the **Button** itself. In the example image above, it is green.
* `Border Radius (px)` decides to what extent the corners and edges of the **Button** are rounded.
* `CSS Classes` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**.

### Tag

![Tag Attributes.](https://1553081948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FU990HLHWA30dTfELtDUK%2Fuploads%2Fgit-blob-dc4f375e34ce9bdd2bebc3e93ff34c8680ab55bb%2Fbuttonattstag.png?alt=media)

This **Attribute** manages the *tags* for the **Button**. See more on *tags* [here.](https://docs.incari.com/incari-studio/objects-and-types/attributes/common-attributes/tag)