button-bar not showing full height with ion-nav-bar

The button-bar is not showing its full height with the nav-bar, seems like it is trying to fit to the ion-nav-bar. Here is what I've got so far:

index.html

<body ng-app="starter">
<ion-nav-bar class="bar bar-header bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>

tab-dash.html

<ion-view view-title="Dashboard">

 <div class="button-bar">
  <a class="button button-positive">Mon</a>
  <a class="button button-positive">Tue</a>
  <a class="button button-positive">Wed</a>
  <a class="button button-positive">Thu</a>
  <a class="button button-positive">Fri</a>
</div>
<ion-content class="padding">
...
</ion-content>
</ion-view>

Try This. 

<ion-view view-title="Dashboard">

<ion-content class="padding">

<div class="button-bar">
  <a class="button button-positive">Mon</a>
  <a class="button button-positive">Tue</a>
  <a class="button button-positive">Wed</a>
  <a class="button button-positive">Thu</a>
  <a class="button button-positive">Fri</a>
</div>


</ion-content>
</ion-view>

EXTRA : I assume you are using the starter template. If you want those tabs to stick to top. You can use the class tabs-top in ion-tabs

I got it working by using ion-tabs as suggested by Karan Kumar. To resolve the padding issue, I added has-tabs-top to the ion-content. Use button-clear to remove button's borders

<ion-view view-title="Dashboard">
    <ion-tabs class="tabs-positive tabs-top">
        <div class="button-bar">
            <a class="button button-clear">Mon</a>
            <a class="button button-clear">Tue</a>
            <a class="button button-clear">Wed</a>
            <a class="button button-clear">Thu</a>
            <a class="button button-clear">Fri</a>
        </div>
    </ion-tabs>
    <ion-content class="padding has-tabs-top">
     ...
    </ion-content>
</ion-view>