How to add a ion-badge inside an ion-button in Ionic 5?

Issue

I need to get something like this

enter image description here

but I get this

enter image description here

the badge can’t get over it the button, the corner is hidden. the code:

html

    <ion-button (click)"onClick()" color"primary" fill"solid"> 1
      <ion-badge color"dark" >2</ion-badge>
    </ion-button>

scss

ion-badge{
    position: absolute; 
    font-size: 8pt;
    right: -16px;
    top: -3px; 
}

ion-button{
    margin: 5px;
    width: 40px;
    height: 40px;
    position: relative;
    overflow: visible!important;
}

Solution

In your case setting overflow: visible!important; to ion-button element will not solve the issue. This is because, deep inside the ion-button there is a button with class button-native which is inside the shadow-dom. This class has overflow: hidden defined inside the style definition. You have to update this style to enable the overflow of button.

Refering to this tutorial you can add style for the shadow dom element as follows.

Template

<ion-button (click)"onClick()" class"custom-class" color"primary" fill"solid">
  1
  <ion-badge color"dark" >2</ion-badge>
</ion-button>

CSS

ion-badge {
    position: absolute; 
    font-size: 8pt;
    right: -16px;
    top: -3px; 
}

ion-button {
    margin: 5px;
    width: 40px;
    height: 40px;
    position: relative;
    // overflow: visible!important;
}

/* Setting Overflow Visible */
ion-button.custom-class::part(native) {
    overflow: visible;
}

Answered By – Nitheesh

Leave a Comment