# Visual element properties

{% tabs %}
{% tab title="Experience level" %}
This core reference entry is suited for <mark style="color:green;">**beginner-level builders**</mark>**.**&#x20;

[Learn more about experience levels.](#user-content-fn-1)[^1]
{% endtab %}

{% tab title="In-depth articles (12)" %}
To learn about this topic more in-depth, we recommend reading the suggested articles below:

#### Input forms

* Article: [Input forms](https://manual.bubble.io/help-guides/design/elements/web-app/input-forms)

***

**Other element categories**\
In this article series, we cover how to work with different element types:

* Article series:[ Elements](https://manual.bubble.io/help-guides/design/elements)
  * Article series: [The element hierarchy](https://manual.bubble.io/help-guides/design/elements/the-element-hierarchy)
  * Article: [The page](https://manual.bubble.io/help-guides/design/elements/web-app/the-page)
  * Article series: [Container elements](https://manual.bubble.io/help-guides/design/elements/web-app/containers)

    Elements that contain other elements.
  * Article: [Visual elements](https://manual.bubble.io/help-guides/design/elements/web-app/visual-elements)

    Elements like text, buttons, icons and images.
* Article: [Conditional expressions](https://manual.bubble.io/help-guides/logic/conditions)

  Making your elements change appearance in response to varying conditions.

***

**The design tab**\
In this article we cover the different tools available in the design tab.

* Article: ´[The design tab](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/tabs-and-sections/design-tab)

***

#### Workflows

Workflows are used to connect elements with actions, such as saving the value of a text input element or uploading a file.

* Article series: [Workflows](https://manual.bubble.io/help-guides/logic/workflows)

***

#### Design

Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.

* Article series: [Design](https://manual.bubble.io/help-guides/design)
  * Article: [Responsive design](https://manual.bubble.io/help-guides/design/responsive-design)\
    Building pages that work on all devices, such as a laptop and a phone.

***

**Previewing your app**

In this section about how to [preview your app](#user-content-fn-2)[^2] in the development environment.

* Article: [Previewing your app](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app)
  {% endtab %}

{% tab title="Videos (5)" %}
Bubble Academy: [How to Use The Input Element](https://www.youtube.com/watch?v=C7Yg9JbVQsI\&t=1s)\
Bubble Academy: [How to Use The Mulitline Input Element](https://www.youtube.com/watch?v=vQ8ruikkxEA)\
Bubble Academy: [How to Use the Slider Input](https://www.youtube.com/watch?v=4GxuhmKij_4)\
Bubble Academy: [Element videos](https://www.youtube.com/@BubbleIO/search?query=element) (list of videos related to elements)

#### Connecting elements to workflows

Bubble Academy: [How to Trigger Workflows From Input Changes](https://www.youtube.com/watch?v=mDEVJLujlkQ)
{% endtab %}
{% endtabs %}

{% hint style="info" icon="desktop" %}
This article describes elements available in **web apps** ↓

[Click here for native mobile visual elements](https://manual.bubble.io/core-resources/bubble-elements/element-properties/native-mobile-element-properties/visual-element-properties-mobile).
{% endhint %}

Visual elements are elements that display content without accepting user input; things like text, images, icons, and shapes.&#x20;

<table><thead><tr><th width="123.8359375">Element</th><th>Description</th><th>Link</th></tr></thead><tbody><tr><td>Text</td><td>Displays text.</td><td><a data-mention href="visual-element-properties/text-element">text-element</a></td></tr><tr><td>Button</td><td>Displays a button that can be connected to a <a href="../../../bubble-workflows">workflow</a> when clicked.</td><td><a data-mention href="visual-element-properties/button-element">button-element</a></td></tr><tr><td>Icon</td><td>Displays a vector-based icon from a predefined icon set.</td><td><a data-mention href="visual-element-properties/icon-element">icon-element</a></td></tr><tr><td>Link</td><td>Displays a link that lets the user navigate to a page or URL when clicked.</td><td><a data-mention href="visual-element-properties/icon-element">icon-element</a></td></tr><tr><td>Image</td><td>Displays an image.</td><td><a data-mention href="visual-element-properties/image-element">image-element</a></td></tr><tr><td>Shape</td><td>Renders a basic geometric shape.</td><td><a data-mention href="visual-element-properties/shape-element">shape-element</a></td></tr><tr><td>Map</td><td>Displays a Google Map that users can interact with.</td><td><a data-mention href="visual-element-properties/map-element">map-element</a></td></tr><tr><td>Alert</td><td>Displays a contextual message to the user, typically for notifications or warnings.</td><td><a data-mention href="visual-element-properties/alert-element">alert-element</a></td></tr></tbody></table>

[^1]: In the Bubble docs, experience levels are categorized into beginner, intermediate, and advanced.

    To assist with learning, especially for more complex topics, we'll recommend prerequisite reading where it could be beneficial.&#x20;

[^2]: Every chance that you make in your app can be instantly previewed so that you can see how your app looks to your users.

    User manual article: [Previewing your app](https://manual.bubble.io/help-guides/getting-started/navigating-the-bubble-editor/previewing-your-app)

    &#x20;&#x20;


---

# 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://manual.bubble.io/core-resources/bubble-elements/element-properties/web-element-properties/visual-element-properties.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.