Ion-buttons with badges for IONIC 4

hello, currently i’m using ion-tab-button like this to have a “proper” badge on the ion-toolbar
image

        <ion-buttons slot="primary">
            <ion-tab-button (click)="showCart()">
                <ion-icon name="cart"></ion-icon>
                <ion-label>Cart</ion-label>
                <ion-badge color="primary">11</ion-badge>
            </ion-tab-button>
        </ion-buttons>

and it doesn’t feel right to use ion-tab-button i tried using a ion-button with css and the badge gets cut off
image

      <ion-button (click)="showCart()">
        <ion-icon slot="icon-only"
                  name="cart">
        </ion-icon>
        <ion-badge color="primary">11</ion-badge>
      </ion-button>


ion-button {
	ion-badge {
		position: absolute;
		top: -0.2rem;
		right: -0.2rem;
		opacity: 0.9;

		& ~ ion-icon {
			margin-right: 1.2rem;
		}
	}
}

anybody have a working badge for ion-buttons in ion-toolbar?

Hi, I try this

ion-button {
	ion-badge {
		position: absolute;
		opacity: 0.9;
        top: 0.1rem;
        right: 0.2rem;
		& ~ ion-icon {
			margin-right: 1.2rem;
		}
	}

       <ion-button (click)="message.emit()">
                    <ion-badge color="primary">11</ion-badge>
                <ion-icon name="md-chatboxes">

                </ion-icon>
            </ion-button>

Just remove slot=“icon-only”

You need to use the --overvlow:visible, otherwise the ion-icon will be cut (works inside ion-header/ion-toolbar too):

ion-toolbar {
  .notification-icon-button {
    --overflow: visible;

    ion-badge {
      position: absolute;
      background: #f70b0b;
      border-radius: 50%;
      opacity: 0.9;
      top: 0.1rem;
      right: 0.2rem;
    }
  }
}
            <ion-button (click)="onNotificationsClick()" class="notification-icon-button">
                <ion-badge class="notification-badge">10</ion-badge>
                <ion-icon slot="icon-only" name="md-notifications"></ion-icon>
            </ion-button>
2 Likes

My Ionic 5 solution:

.badge-one {
  position: absolute;
  top: 0px;
  right: -5px;
  font-size: 0.6em;
  --padding-start: 5px;
  --padding-end: 5px;
}

.badge-two {
  position: absolute;
  top: 0px;
  right: -5px;
  font-size: 0.6em;
  --padding-start: 3px;
  --padding-end: 3px;
}
      <ion-button class="badge-button" routerLink="/notifications/" routerDirection="forward">
        <ion-icon size="large" name="notifications-circle-outline">
        </ion-icon>
        <ion-badge [class.badge-one]="unread < 10" [class.badge-two]="unread >= 10" color="danger">{{ unread }}</ion-badge>
      </ion-button>

Screen Shot 2020-05-30 at 12.36.23

Screen Shot 2020-05-30 at 12.36.02

P.S. I call different classes for one digit and more digits. It’s optional.

2 Likes