Ever wanted to add an icon within a button element in Bubble? At this point, you might already be familiar with the process of adding an icon into a text element using custom HTML. What you might find, however, is that the same process doesn’t apply when working with a button element.
The process of adding an icon to a button element includes:
- Adding emojis as an alternative to icons
- Building a custom button with a group element
- Making a group function like a button
This complete guide will explain not one, but two solutions to creating a custom button with an icon in Bubble.
Full Transcript of Tutorial
1. Adding emojis as an alternative for icons
Unlike text elements in Bubble, buttons don’t allow you to format HTML code inside the element. This means it’s not possible to format and display a custom icon.
If you’d like to make use of a button element, it is possible to add an emoji character directly within the text of the button. As emojis are a Unicode character, they’re able to format and display like regular text.
When using a Mac device, you can easily access the emoji keyboard through the shortcut ‘CONTROL-COMMAND-SPACE’.
This shortcut will open the emoji library, then allow you to search and select whichever emoji you’d like to display. Whichever emoji you select will then display directly inside your button element.
Note: If you’re using a Windows device, you won’t have access to the same keyboard shortcut. As an alternative, you can use a site like Emojipedia to copy and paste emoji characters.
2. Building a custom button with a group
Although it’s possible to add an emoji inside a button, how could you leverage an icon element instead?
Within Bubble, it’s possible to create your own custom button using a group element. Within this group, we can place both our text element, alongside an icon to replicate the same functionality as a real button.
Now, you might be slightly worried that if you were to connect a workflow to the group and your user was to click the icon or the text, it wouldn’t run a workflow.
That actually doesn’t happen as long as you don’t add workflows to the individual elements inside of the group. If a user clicks the text, then it’ll run the workflow. The same occurs if they click the icon.
So let’s get into the process of creating a custom button with a group.
If we start by adding both an icon and a text element beside each other on the page, we can select both elements, right-click, then choose the option to ‘group the elements together’.
Now, within our new group, we’ll open our layout tab and make this element fully responsive. If we set the minimum width to 0 pixels, then add a maximum width of 150 pixels, it’ll reconfigure the shape of our group to look more like a button element. We can then also update the height of the button to 45 pixels.
While in our layout tab, we’ll also set the container alignment of this group to be a ‘row’ so any elements placed within it will be positioned side-by-side.
Now, let’s add a background to the group. In our appearance tab, we can remove the default style of this group, then select to add a flat background color. We can also set the color of the text within the button to white.
While editing the styles of our group, we’ll also update the color of our icon. We’ll set this color as white so it matches the text inside our button.
At this point in time, we’ve now built a functional button from scratch using a group element. If you wanted to make this button functional, you could create a workflow that runs whenever this group is clicked.
Within this workflow, you can select from the ‘navigation’ events, then choose the ‘go to page’ action. From here, you’ll then need to select the destination page within your app.
3. Making a group function like a button
After building a custom button using a group, there’s one last customization we can add to make this behave exactly like a native button element.
When a user hovers their mouse over this group, I’d like it to respond by changing its color. To do this, simply open the conditional tab, then define a new condition whenever ‘this button is hovered’.
When this condition is true, we can change the background color of the button. We’ll set the color to be a slightly darker version of the current background color.
We can also take this one step further and add a shadow outset around the borders of the button.
If we now run a preview of the application, you’ll see when we move our mouse over the group, it reacts like a traditional button.
Just like that, you now know how to create your own custom button element from scratch. Of course, throughout this process, you also learned how to add an icon element directly inside a button element.
As I mentioned at the start of this guide, it’s a super straightforward process. Between both the options I’ve provided, I’m sure you’ll find a solution perfect for your own application.