Visual elements (mobile)

Text

A non-editable text element.

Button

A button is a shape with a text/icon that's optimized for click workflows. It can contain a text, an icon or both.

Icon

Icon elements let you pick an icon to display from several different icon collections.

On Android devices, phosphor “filled” icons may display as black boxes instead of the intended icon. This issue is due to a bug in a third-party library required for rendering these icons.

At this time, there is no workaround. The issue will remain in place until it is resolved by the library author. If your app relies on filled phosphor icons, consider using an alternative icon style for Android builds.

Image

Image elements allow you to place images in your app. The element supports all widely used image types such as png, jpg, svg, webp and gif.

Generating an image with AI

You can generate images with AI. Type in a prompt and select a size, quality, and style. The Auto setting lets the AI choose style setting based on your prompt. The number of tokens used depends on your selections.

Check Generate Alt tags to automatically generate an Alt text.

Shape

The shape element adds a rectangle to the view which can be resized, rounded and styled in different ways.

Map

The Map element lets you implement a Google Map on the view, fully navigatable by your users. You can also use Apple Maps on iOS devices by enabling the Use Apple Maps on iOS property.

WebView

The Web View element allows you to display one of your app’s pages inside an element within your mobile app. You can set its responsive behavior just like any other element, ensuring it adapts well to different screen sizes.

Keep in mind that users won’t be able to navigate to other pages while using the Web View, so it’s important to design the page with all necessary content on a single page. The Web View element is limited to displaying pages from your own app, meaning external URLs cannot be used.

The Web View element currently does not work in the web preview— it only functions properly in the BubbleGo app.

Disable zoom

The Enable Zooming property allows users to use the pinch-to-zoom gesture to zoom in or out. This setting is disabled by default.

It helps improve the user experience, particularly for apps that rely heavily on webviews, where unintended zooming can cause a disruptive interface. If you want to allow zooming, you can disable this setting in the element's properties.

Sign up with Apple button

Note: The Apple Sign-In Button has fewer styling options than other Bubble elements. This is by design: Apple's Human Interface Guidelines specify how the button may appear, and App Review checks it. Bubble exposes the options Apple allows and locks the rest, so a button you can place in the editor is one that passes review. You can read more about this in the article linked below.

The Sign up with Apple button is a pre-built element that triggers Apple's sign-in flow when tapped. It handles the native experience on iOS and the browser-based flow on Android and web, and can be styled to match your app's design.

Before using this element, follow the setup steps in the main article to configure your app on the Apple side.

Article: Setting up Sign in with Apple