# Text box

Static UI elements are serving design and usability of apps. They include text boxes, shapes, icons, and images. Apart from icons, those elements don't offer any additional functionality.

## Text box

To add text:

1. Click on the text box icon in the top bar. <img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FG6Y7ZLV4yOcGe9GJKLzs%2Fimage.png?alt=media&#x26;token=35bba966-f518-41fe-bfa6-dc3f0f2a4748" alt="text box icon" data-size="line">
2. Hover above the UI editor and click where you want to place the text box.
3. Double click into the text box to write text and change formatting.

Use the appearing top bar to change font, font size, color, and other formatting of the text box.

## Table

To add a table:

1. Follow steps 1-3 of the text box instructions.
2. Click on the appearing vertical dots icon in the top bar. <img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FC7vvIQ6zBP8YzYhvK9Wj%2Fimage.png?alt=media&#x26;token=276b03bb-56bd-4e62-888c-1b3df950c973" alt="3 dots icon" data-size="line">
3. Click on `Insert table`.
4. Define the number of columns and lines of the table.
5. Click `OK`.

## Shape

For your app, you can use the following shapes:

* Arc
* Circle
* Ellipse
* Rectangle
* Ring
* Star

To add a shape:

1. Click on the shapes icon in the top bar. <img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FihXvriMZ3ua17kwe36Zi%2Fimage.png?alt=media&#x26;token=7a311694-69d4-4585-96e8-cd1fc7a57182" alt="Shapes icon" data-size="line">
2. Select a shape from the list.
3. Hover above the UI editor and click where you want to place the shape

Access the shape settings via the settings icon (:gear:) in the top bar to configure a shape. In the shape settings, you can:

* define border weight
* define opacity
* enable shadow
* add an animation (appear on hover)
* adjust fill color
* adjust border color
* add an identifier

## Icon

1. Click on the icons icon in the top bar. <img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FmsxwEY17Di5U5h3w8hDP%2Fimage.png?alt=media&#x26;token=7bf4df61-a252-4595-911d-b49eb02961e8" alt="Icons icon" data-size="line">
2. Select an icon from the dropdown.
3. Hover above the UI editor and click where you want to place the icon.

Access the icon settings via the settings icon (:gear:) in the top bar to configure an icon. In the icon settings, you can:

* pick a style (solid, regular, light, thin, duotone)
* adjust fill color

Icons can be used for [in-app navigation](https://docs.heisenware.com/~/changes/Q625pQNc0nXqVGPtyjAY/app-appearance/in-app-navigation#widget-navigation), too. Simply drag and drop a page or subpage using its handle onto an icon to make it a page link.

## Image

To add an image to the UI, upload it to [resources ](https://docs.heisenware.com/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/data-and-file-storage/file-server)first. Now, you can drag and drop it from the file manager to the desired place in the UI editor.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.heisenware.com/~/changes/Q625pQNc0nXqVGPtyjAY/building-apps/ui-elements/text-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
