Styles

Styles are reusable design definitions that bundle multiple visual properties into one place. Instead of styling every element individually, you define a style once and apply it wherever you need it. When you update the style, every element that uses it updates too.

This makes styles one of the most powerful tools for keeping your app's design consistent and easy to change. A well-organized set of styles serves as your app's design language, giving every button, text element, and container a shared foundation to build on.

Each style is connected to a specific element type and includes different properties that can be edited (depending on the element type), such as:

Styles work hand in hand with color and font variables.

The Styles tab supports styles for web and mobile apps in the same project, allowing you to define and manage visual settings for both mobile and web components. With platform-specific filtering, compatibility indicators, and canvas previews, it's easy to build consistent designs across platforms while accounting for the differences between them.

A platform filter is available in the left sidebar of the Styles tab. This lets you view:

Use this filter to focus on the styles relevant to the platform you're designing for.

Each style includes a compatibility badge that shows where it can be used:

These badges help clarify which platform each style supports.

Some elements, like buttons, are available on both mobile and web. For these shared elements, the style editor groups settings into:

For example, shadows are handled differently between platforms. These differences are reflected in the style editor, with mobile- and web-specific controls shown where relevant.

The expandable section below lists elements by platform:

When editing styles for shared elements, the canvas preview includes a toggle that lets you switch between web and mobile views. This helps you see how the style will appear in each context.

If a style applies only to one platform, the toggle is hidden and the preview reflects that platform by default.

Styles can be created for mobile-only elements such as:

When editing a mobile-only style, the style editor shows mobile-specific settings and the preview reflects the mobile context. These styles won't appear in web-only projects.

You can define as many styles as you want. Styles are applied to one type of element, such as Buttons, but you can have more than one style for a Button. Try to name them in a way that is easy to read, as you'll have to pick the style you need for each element. You can also specify which style should be used by default when you insert a new element.

Once a style is created, it opens in the editor, where you can configure all the properties that make up its visual definition. This is where the style comes to life, defining the exact look and behavior every element using it will inherit.

The center of the editor shows a live preview of the style applied to an example element. As you adjust properties, the preview updates immediately, letting you see how the style will look before applying it to real elements in your app.

The Visual tab in the property editor holds the style's default properties: everything that applies whenever the style is used without a condition being met. Depending on the element type, these can include:

Setting these values here means every element using the style picks them up automatically. Change a value in the style, and every element updates.

The Conditional tab lets you define how the style responds to specific states, such as when the element is hovered, focused, disabled, or matches a custom condition.

Each conditional has two parts:

Conditionals only override the properties you explicitly change. Everything else falls back to the default values in the Visual tab. This makes it easy to build styles that respond to interaction without duplicating the base configuration.

For example, a button style might use its default background color from the Visual tab and switch to a darker shade in the Conditional tab when hovered. Only the background color needs to be defined in the conditional. Padding, text style, and everything else stay the same.

The Set as default option in the top right marks the current style as the default for its element type. New elements of that type are then created with this style applied automatically.

Setting a default style is useful when you want most elements to share the same look without having to apply the style manually each time. Elements can still be assigned a different style at any point.

The Find elements in use option opens the app search tool, showing every element that currently uses this style. This is useful for reviewing the impact of a change before making it, cleaning up unused styles, or tracing inconsistencies in your design.

Applying a style is the fastest way to make sure an element matches your app's design language. From the property editor, you can apply, override, and detach styles as needed, giving you flexibility without breaking the consistency of your design.

Detaching a style breaks the connection between the element and the style. The element keeps its current appearance, but any future updates to the style no longer apply. From this point on, the element behaves like any other element without a style, with all its properties configured directly.

Sometimes an element needs a small variation from its style. Instead of creating a new style just for one element, you can override specific properties directly on the element.

When an element has at least one overridden property, its selected Style in the property editor will show a small Overridden tag:

Overridden properties are visually marked with a slightly darker color in the property editor, so you can see at a glance which properties are following the style and which have been changed.

The element still uses the style for every other property, so future style updates continue to apply to the properties you haven't overridden.

Conditionals can be placed on elements to make them look or behave differently based on specific criteria.

When setting up a conditional, you tell Bubble to check for specific criteria and apply one or more properties when the condition is true. You can set each property individually, or apply a style to change multiple properties at once.

Even when a style is applied through a conditional, you can still adjust individual properties on top of it.

Sometimes a conditional is defined both on a style and on an element that uses that style. When the two conflict, the conditional on the element takes priority.