> For the complete documentation index, see [llms.txt](https://docs.incari.com/incari-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.incari.com/incari-studio/2023.2/objects-and-types/scene2d-objects/gui/button.md).

# 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**](/incari-studio/2023.2/toolbox/events/mouse.md). A **Button's** text, placement, and size can be altered using the [**Attributes**](#attributes).

![Button.](/files/tnX0Itt9iU9oqwefMfID)

![Button with Text.](/files/0LIYYhGMa4w1DNZ378ge)

## Attributes

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

* [**Transformation**](#transformation)
* [**Text**](#text)
* [**Button**](#button)
* [**Code**](#code)
* [**Tag**](#tag)

### Transformation

![Transformation Attributes.](/files/tenRY1IVOGIwTm7nzQt4)

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

### Text

![Text Attributes.](/files/ws0YtrQgJoyxhABaIuSv)

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

* `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.
* `Font family` offers three different font types: `monospace`, `sans-serif`, and `serif`. More fonts can be added by the user in [**Project Settings**](/incari-studio/2023.2/modules/project-settings/fonts.md).
* `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.
* `Font size (px)` determines the size of the font in pixels.
* `Font color` decides the color of the **Button's** text.

### Button

![Button Attributes](/files/J4By6SIxaSXgAF8wAGou)

The `Button` **Attributes** provide crucial visual aspects for a **Button Object**.

* `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.

### Code

![Code Attributes.](/files/hirsBa1pQYnniCc4yIcB)

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

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

* `Class names` contain the *CSS* class names of the **Object**.
* `Stylesheet` contains the *CSS* stylesheet of the **Object**.

### Tag

![Tag Attributes.](/files/hKG4ViIIvTY99HH0SQ2e)

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