Ionic 5: Stack multiple badges vertically on ion-item

Hi there!

I’m trying to stack multiple ion-badge vertically on the right side of an ion-item and need your help. This is my code, but (as expected) the badges are horizontally.

<ion-list>
  <ion-item>
    <ion-label>Label</ion-label>
    
    <ion-badge slot="end">Badge 1</ion-badge>
    <ion-badge slot="end">Badge 2</ion-badge>
  </ion-item>
</ion-list>

I even tried the following with no success:

<ion-list>
  <ion-item>
    <ion-label>Label</ion-label>

    <div slot="end">
      <ion-badge>Badge 1</ion-badge>
      <ion-badge>Badge 2</ion-badge>
    </div>
  </ion-item>
</ion-list>

Thank you very much!

An workaround that I found was

<ion-badge style="display: grid;">
   <ion-badge>
      Badge 1
   </ion-badge>
   <ion-badge>
      Badge 2
   </ion-badge>
</ion-badge>

EDIT: Set the color in parent IonBadge as transparent if want to use children’s color

Thank you, it’s working very well. :smile:

1 Like