Styles

This section covers styles, Bubble's tool for managing centralized stylesheets that can be applied to elements across your app

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:

• Background color or image

• Border

• Shadow

• Font

• Transitions

Styles work hand in hand with color and font variables.

Web and mobile styles

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.

Filtering styles by platform

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

• All styles (web and mobile)

• Mobile-only styles

• Web-only styles

You can filter styles by platform by using the highlighted buttons above.

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

Compatibility badges

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

• A phone icon indicates the style applies to mobile-only elements

• A computer icon indicates web-only elements

• Both icons appear for styles that apply to elements shared between mobile and web

These badges help clarify which platform each style supports.

Style editor for shared elements

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

• Shared properties, which apply across both platforms

• Platform-specific properties, which are unique to either web or mobile

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 box below lists elements by platform:

Element platform table

Name	Type
Web and mobile
Text	Both
Alert	Web
Input	Both
Multiline Input	Both
Dropdown	Web
Checkbox	Both w/ Different properties
Radio Buttons	Web
Date/Time Picker	Both w/ Different properties
File Uploader	Web
Popup	Web
Button	Both
Link	Web
Icon	Both
Image	Both
Video	Web
Shape	Both
Slider	Web
Group	Both
Floating Group	Both
Table	Web
Group Focus	Web
Repeating Group	Web
Search Box	Web
Map	Both w/ Different properties
HTML	Web
Mobile only
Sheet	Mobile
Tab Bar	Mobile
Tab item	Mobile
Top App Bar	Mobile
Web View	Mobile
Horizontal List	Mobile
Horizontal list item	Mobile
Short List	Mobile
Short list item	Mobile
Selectable list	Mobile
Selectable list item	Mobile
Vertical list item	Mobile
Section header item	Mobile
Swipe action	Mobile

Web/mobile preview toggle

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.

Creating mobile-only styles

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

• App bars

• Tab items

• Sheets

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.

Notes

• Mobile-only styles do not include the platform toggle or web-specific settings.

• Preview behavior for mobile elements may differ slightly depending on the element’s structure or layout properties.

Creating a new style

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 that you need for each button. You can also specify which style should be used by default when you insert a new element in this tab.

1

Navigate to Styles

Go to the Global tab and open Styles.

2

Add a new style

Click + New to open the Create a new style dialog.

3

Name the style

Enter a name that describes the style's purpose, such as Accent, Destructive, or Ghost.

4

Choose the element type

Select the element type this style applies to from the Element style dropdown, such as Button, Text, or Group. Each style is tied to a specific element type and can only be applied to elements of that type.

5

Create the style

Click Create. The new style opens in the editor, where you can configure its visual and conditional properties.

Configuring styles

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 style canvas

The center of the editor shows a live preview of the style applied to an example element.

The style canvas gives you a preview of an element with the style applied. The right-hand bar is where you configure the properties and conditionals for the selected style.

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.

Visual properties

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.

The right-hand bar is where you configure the visual properties of the selected style.

Depending on the element type, these can include:

• Background color and opacity

• Text color, font, and size

• Borders and corner radius

• Padding and spacing

• Shadows and other effects

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

Conditional properties

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:

• When, which defines the condition, such as This Button is hovered.

• Then, which defines the property changes that apply when the condition is true.

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.

Using a dynamic expression, we can detect when the button is hovered and change to a slightly darker color.

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.

Data sources: When setting up conditionals directly on a style, the available data sources are more limited than when building conditionals on an individual element. This is because styles are global and can't reference page-specific components, such as an element on a specific page.

Setting a default style

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 new default doesn't change any existing elements. It only affects which style is applied to new elements you create afterward.

1. The current default style

2. Clicking this button sets the selected style as the new default

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.

Finding elements in use

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.

Using styles with elements

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.

Applying a style to an element

1

Select the element

Select the element on the page or view.

2

Navigate to the Style section

In the element property editor, make sure the Visual tab is active, and scroll down to Style.

3

Add a style

Click + to open the style dropdown.

4

Choose a style

Select a style from the dropdown. The element immediately picks up all the properties defined in the style, including any conditional properties.

Detaching a style from an element

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.

1

Select the element

Select the element on the page or view.

2

Open the Style section

In the Visual tab and Style section of the property editor, find the currently applied style.

3

Detach the style

Click the detach icon in the upper right corner of the Style section, and the Style is immediately detached.

Overriding style properties

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.

1

Select the element

Select the element on the page or view.

2

Find the property

In the element property editor, find the property you want to change, such as Background or Border.

3

Adjust the value

Change the value to override the style's default.

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

The style is marked with Overridden if the element has at least one overridden property.

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.

Resetting a style override

If you decide an override was a mistake or is no longer needed, you can reset it and return the property to the style's value.

1

Select the element

Select the element on the page or view.

2

Navigate to the Style section in the property editor

Make sure the Visual tab is active in the property editor and locate the Style section.

3

Reset the override

Click the reset icon above the style selector. The element's properties snap back to the style's definition.

Using styles in conditionals

Conditionals can be placed on elements to make them look or behave differently based on specific criteria. You can read more about conditionals here.

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.

You can change the style of an element based on specific criteria, by using conditionals. In this example, the style of the text changes when the user is logged in.

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

Conflicting conditionals

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.

FAQ: Styles

details>

What's the difference between a style and a variable?

A variable is a single named value, such as a color or a font family. A style is a full definition that combines multiple properties into a reusable configuration, often referencing variables in the process. Styles let you build complete component looks, while variables give you the individual pieces to work with.

Can I use variables inside styles?

Yes. Styles work best when they reference color and font variables instead of hardcoding values. This ties your design system together: variables define the individual values, and styles combine them into reusable component definitions.

What happens when I update a style?

Every element that uses the style updates automatically to reflect the new values. Any properties overridden on individual elements stay the same, and continue to follow the updated style for everything else.

Can I apply the same style to different element types?

No. Styles are tied to a specific element type, since different elements have different properties. A button style can only be applied to buttons, a text style only to text elements, and so on.

Can I override properties in a style on a specific element?

Yes. Selecting an element and changing a property directly overrides the style's value for that element only. The rest of the style still applies, and future updates to the style continue to apply to the properties you haven't overridden.

What happens if I detach a style from an element?

The element keeps its current appearance, but the connection to the style is broken. Future updates to the style no longer apply, and the element behaves like any other element without a style.

Can I use styles on both web and native mobile apps?

Yes, although the element types and properties can vary. You can read more about this and cross-platform styling here.

Can I set a style as the default for an element type?

Yes. In the style's editor, select a style and click Set as default. New elements of that type will use this style automatically. Existing elements aren't affected.

Can I delete a style that's still in use?

You can, but any element referencing it will revert back to hardcoded styling. Use Find elements in use to review where the style is applied before deleting it.

Can styles include conditional behavior?

Yes. The Conditional tab in the style's editor lets you define how the style responds to specific states, such as hover, focus, or a custom condition. Only the properties you explicitly set inside the conditional are changed. Everything else falls back to the default values.

What happens when a conditional on an element and a conditional on a style conflict?

The conditional on the element takes priority. If both change the same property, the element's conditional wins.

Are styles the same as reusable elements?

No. Styles apply to individual elements and control their visual properties. Reusable elements are shared components that include their own structure, workflows, and design. You'll often use both together, with reusable elements built from styled components.