Ionic tab bar circle middle button

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Glad you like it! 🤩
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

Today I'll be showing you how to make a circle middle button inside a tab bar.
It's a way to make a button stand out more from the tab bar, and it can be your center of attention inside your app.

We won't be making everything from scratch, so if you plan to work with me on this article, download the Ionic tab bar starter from GitHub.
From there, open up the project in your editor of choice. If we then run the application, we will get a basic tab bar, and we will focus on changing this tab bar.

Open up the tabs/tabs.page.html file.
For our example, we will make five buttons in our tab bar. The middle one will be outstanding.
Let's start by adding the five buttons and make the middle one an empty one.
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="ellipse"></ion-icon>
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button></ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="square"></ion-icon>
<ion-label>Tab 4</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="egg"></ion-icon>
<ion-label>Tab 5</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This will result in the following:

You might think, cool, but we are missing that bottom one! And you're right, so what we'll do is add a FAB button for that.
It will take place outside of our tabs and look like this.
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button>
<ion-icon name="leaf"></ion-icon>
</ion-fab-button>
</ion-fab>
And this will give us the following:

Cool and simple right? You can find today's code on GitHub as well!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter