Ion-buttons with badges for IONIC 4

Ionic Framework
4

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.

11 Likes