> For the complete documentation index, see [llms.txt](https://manual.bubble.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://manual.bubble.io/help-guides/design/elements.md). # Elements {% hint style="info" %} This is the long-form article on Bubble's different elements. If you want the short-form technical reference that details all the different element properties, you'll find that in the link below. **Core reference:** [Elements](/core-resources/bubble-elements.md) {% endhint %} ## What is an element? An element is any individual piece of your app's user interface. Buttons, images, input fields, containers, icons, and maps are all examples of elements. Together, they make up everything a user sees and interacts with on the screen.

Combining elements like input fields and buttons is how you design your app and give users different ways to interact with it.

Every part of your app's user interface is made up of elements organized in a hierarchy. Each element has a set of style and responsive properties that control how it looks and behaves. Together, the hierarchy and these properties give the browser everything it needs to render the page correctly.

The element tree and element palette — The **element tree** shows all the elements on the current page or view in a hierarchy, and the **element palette** lets you add new elements to the page or view.

Bubble lets you control every layer of this: which elements exist, how they look, how they behave across different screen sizes, and how they respond as elements are shown, hidden, or animated on the page.

What is the element hierarchy?

Every element you add becomes part of a hierarchy that shapes both its structure and design. In web apps, the page is the parent of every other element on it. In mobile apps, the view serves the same role. Within that parent, you can group elements into containers to create additional parent-child relationships. This hierarchy is what the browser or mobile app uses to render the layout correctly. Container elements can hold data, style, and layout properties that their child elements inherit or reference. This makes hierarchy an important tool for keeping your design consistent and your data flowing predictably. **Article:** [The element hierarchy](/help-guides/design/elements/the-element-hierarchy.md)

### Web and mobile elements Bubble supports both web apps and native mobile apps, and elements work slightly differently on each. * **Web apps** run in a browser. They're built around pages, with elements arranged in a hierarchy on each page. Web elements are designed for the browser environment and include familiar building blocks like text, buttons, images, repeating groups, popups, and floating groups. * **Native mobile apps** run as installed apps on iOS and Android devices. Instead of pages, they're built around views, which serve the same role but exist within a single app shell rather than being loaded as separate URLs. Mobile elements are designed for how mobile operating systems handle layout and interaction, and include native components. Some elements are only available on one platform. ### Using AI to build with elements Bubble's AI Agent can design pages from scratch with a simple prompt. Describe what you need in your preferred language, and the Agent gathers context from your app and presents a plan for what it will build, ready for you to approve.

Shortly after you approve the plan, your new page is ready, with elements and workflows connected and set up to use. From there, you can refine the design directly in the editor or by prompting the Agent for adjustments.

The Agent can also add, modify, or reconfigure individual elements on an existing page, making it a useful partner throughout the design process, not just at the start. *** ## Types of elements Bubble offers many different elements, split into a few categories based on their purpose. Plugins can also add new elements, ranging from simple utilities to complex integrations. ### **Visual elements**

Visual elements combined to show a hero section on a website. — Visual elements let you design your page to display information and accept clicks. Every element in this example is a visual element: a text element, an image, and a button.

Visual elements are placed on the page for aesthetic purposes or to display information. They don't accept data input, though they can accept clicks and are often connected to workflows. **Article:** [Visual elements](/help-guides/design/elements/web-app/visual-elements.md) | [Mobile-specific visual elements](/help-guides/design/elements/ios-and-android-app/visual-native-app-elements.md)

Platform	Element	Purpose
Web/Mobile	Text	Displays static or dynamic text.
Web/Mobile	Button	A clickable element that triggers a workflow when pressed.
Web/Mobile	Icon	Displays a small graphic symbol, often used for actions or visual cues.
Web	Link	A clickable element that navigates to another page or external URL.
Web/Mobile	Image	Displays a static or dynamic image.
Web/Mobile	Shape	Displays a rectangle.
Web	Alert	Displays a temporary message to the user, typically for feedback or notifications.
Web	Video	Embeds a video player, supporting YouTube and Vimeo.
Web	HTML	Renders custom HTML directly on the page.
Web/Mobile	Map	Displays an interactive map with optional markers.
Web	Built on Bubble	A small badge that links to Bubble's homepage.

### **Containers**

Input form inside a container. — Groups can be used both to organize elements like the form above, and to hold the data that you want to work with, such as a user. The group is highlighted with a dashed border in the example.

Containers hold other elements. They serve two main purposes: * They **group other elements** (including other containers) into a single unit. All elements inside belong to the same level of the page hierarchy and move or delete together with the container. * They can also **hold data** relevant to the elements inside. For example, a group with a *User* type of content can pass that user's data down to inputs and text elements inside it. * Containers can hold **a single thing** (like a specific user) or a **list of things** (like a list of users), specified in the *Holds data* column in the table below. Bubble offers several container types, each suited to different layouts and behaviors. **Article:** [Containers](/help-guides/design/elements/web-app/containers.md) | [Mobile-specific containers](/help-guides/design/elements/ios-and-android-app/containers.md)

Platform	Container type	Holds data	Purpose
Web/mobile	Group	Single thing	Hold elements and data anywhere on the page
Web	Repeating group	List	Show a list of things in a flexible design such as cards, lists, and a masonry grid
Web	Table element	List	Show a list of things in rows/columns with headers
Web	Popup	Single thing	Display elements on top of everything else, such as a warning message
Web/mobile	Floating group	Single thing	Hover elements above other elements and stick them to one of the screen edges, like a top navigation bar that stays put
Web	Group focus	Single thing	Display a group that disappears as soon as you click anywhere else, such as a dropdown menu
Mobile	Short list	List	A container for displaying a fixed set of data items. Loads all items immediately, making it best for shorter lists.
Mobile	Horizontal list	List	Displays a horizontally scrolling list of items.
Mobile	Sheet	Single thing	A native overlay that slides up from the bottom of the screen

### Input forms

Input forms are elements that allow your users to provide data to your application. **Article:** [Input forms](/help-guides/design/elements/web-app/input-forms.md) | [Mobile-specific input forms](/help-guides/design/elements/ios-and-android-app/input-forms.md)

Platform	Element	Purpose
Web/mobile	Text input	Names, comments, other short info.
Web/mobile	Multiline text	Descriptions and other longer text. Allows line breaks. No text formatting.
Web/mobile	Checkbox	Check to hold a yes/no value, such as accepting terms and conditions.
Web	Dropdowns	Pick an option from a dropdown list, either static or from the database.
Web	Search box	Search-as-you-type in the database.
Web	Radio buttons	Select one option out of multiple.
Web	Slider input	Pick a numerical value with a visual, draggable slider.
Web/mobile	Date/time picker	Select a date and optionally a time.
Web	Picture uploader	Upload and preview images like profile pictures.
Web	File uploader	Upload other types of files.
Mobile	Selectable list	Select one or more items from a set list.

### **Reusable elements** Reusable elements let you build a component once and use it across your app. When you update the reusable element's definition, every instance updates too, which makes them useful for headers, footers, or any component that appears in multiple places. **Article:** [Resuable elements](/help-guides/design/elements/reusable-elements.md) *** ## How elements behave Elements can be set to behave in different ways depending on the situation or the user's actions. There are two main ways to make them interactive: conditions and workflows. Custom states can be used to temporarily store information. ### Conditions Conditions let you set rules that change how an element looks or behaves based on whether a rule evaluates as yes or no. Nearly every visual property can be adjusted this way, which opens up a lot of possibilities, from subtle style changes to hiding and showing entire sections of the page. Some examples: * A condition on a button that greys it out when a required form field is empty. * A condition on a group that hides it when the current user isn't logged in. * A condition on a group that shows it only when a specific URL parameter is present. **Article:** [Conditions](/help-guides/logic/conditions.md) ### Workflows Workflows connect events (like a button click) to actions (like saving data, sending an email, or navigating to another page). Any element can be the trigger for a workflow, and workflows can chain multiple actions together to build complex behavior. Some common uses include: * Creating, editing, or deleting records in the database * Logging users in and out * Showing, hiding, or animating elements * Navigating between pages or to external links **Article:** [Workflows](/help-guides/logic/workflows.md) ### Custom states Custom states let you store temporary information on an element, such as the current tab in a set or whether a section is expanded. States can be read and updated by workflows and referenced in conditions, giving you flexible control over how the element behaves without touching the database. **Article:** [Custom states](/help-guides/data/temporary-data/custom-states.md) *** ## Working with elements Once you know how elements are structured and how they behave, you can work on placing, styling, and configuring them in the editor. ### Adding elements The element palette on the left side of the screen lets you add new elements to the current page, view, or reusable element. To add a new element, click its type in the palette and draw it directly on the page or view. You can also drag an element straight from the palette onto the canvas. You can use the *Search assets*

Element palette — To add new elements to the canvas, use the element palette on the left side of the editor.

### The element property editor Selecting any element opens the element property editor on the right side of the workspace. This is where you configure the element's name, data source, layout, style, conditions, and behavior. Every element has its own set of properties, based on its type. If you select multiple elements, some properties can be edited in bulk.

The element property inspector lets you configure each element's properties individually.

### Naming elements You can edit an element's name at the top of the property editor. Naming conventions are up to you: some developers use prefixes like `btn_submit`, others use plain descriptions like `Submit button`. Whatever style you choose, keeping it consistent across your app makes elements easier to find and debug as your app grows.

You can give each element a name by clicking its label in the top of the property editor.

By default, Bubble generates a name based on the element's type and content. Renaming as you build helps avoid confusion later, especially when you have several similar elements on the same page. ### Finding and rearranging elements Larger pages can have many elements. A few tools make them easier to navigate: #### The element picker The element picker in the toolbar lists every element on the page. Start typing to filter, and hover to see a thumbnail before selecting.

The element picker lets you quickly select an element by name.

#### The element tree The element tree gives you a hierarchical view of every element and is useful for both selecting and rearranging them by dragging and dropping them to a new position in the hierarchy. Use the search bar at the top of the element tree to filter elements by name.

Searching for elements in the element tree. — You can quickly find elements by typing part of their name in the element tree's filter bar.

#### X-ray view X-ray view makes elements semi-transparent in the editor, allowing you to see elements that overlap.

#### App search tool The app search tool lets you search across pages and workflows for element names, expressions, and more.

The app search tool in the upper right half of the toolbar lets you search for elements and many other things across your app.

**Article:** [The search tool](/help-guides/getting-started/navigating-the-bubble-editor/tools/the-search-tool.md) ### Inspecting elements In the element property editor, you can click the contextual dropdown and select *Inspect* to see other parts of your app that are connected to the element.

Inspect element tool — In this example, we're using the *Inspect* tool to see workflows connected to a specific button.

*** ## Styles and variables Rather than styling each element individually, you can define reusable styles and variables that keep your design consistent across the app. * **Styles** bundle multiple property values together and can be applied to elements of the same type. * **Font and color variables** let you save fonts and colors that you can reference throughout your app. Updating a variable updates everywhere it's used. This system makes it much easier to keep a consistent look and to make design changes at scale. **Article series:** [Styles and variables](/help-guides/design/variables-and-styles.md) *** ## Element security Even though Bubble is a no-code platform, your app is ultimately delivered as code that runs in the user's browser. The elements you place on the page become part of that code, which means their names, static text, and default values are visible to anyone who inspects the page. {% hint style="info" icon="lock" %} A good rule of thumb is to assume that anything you add to an element can be seen by a curious user. Avoid placing sensitive information anywhere on the page, including in element properties, workflows, custom states, and option sets. For data that needs to be protected, use privacy rules in the database instead. {% endhint %} **Article:** [Client-side and server-side](/help-guides/security/client-side-and-server-side.md) ## Other ways to learn

Video lessons

* [Searching for elements](https://youtu.be/7N5MNPdAOmA) * [How to swap element positions](https://www.youtube.com/watch?v=04dDc9VaW2Y)