How to add a button in middle of tab bar?


Hello! I am new to ionic development. I started with the base tabs app and have 4 tabs. I’m trying to figure out how I can add a button to the tab bar and position it in the middle. if I just add a <button> inside <ion-tabs> it shows up nicely but always aligns left no matter what I try.


Why are you using a button instead of the ion-tab directive with the icon you want?

  <ion-tab icon="ion-plus-circled">


Well… I think I decided to do that because if I just put another <ion-tab> there it tries to navigate somewhere when clicked… the purpose of this button will be to display what I think will be a modal to choose from a few options… so I don’t want to navigate away from whatever tab I’m currently on when initially clicked… does that make sense? An example of this is how the app Path works.


Well… use an ion-tab directive with ng-click="openModal()" instead of using ui-sref or href.


Thanks, that definitely does the trick!


Hi, I am trying to do something similar. But when I set the class of ion-tabs to be `tabs-icon-top’ (I need other tabs to show their labels), the center button seems to have some extra padding below. Do you know how to figure that?


I have the same problem. Any help?