I am looking to customize the top right corner of a button in order to add a badge in that area. Here is an example of what I have in mind:
https://i.sstatic.net/j0xdz.png https://i.sstatic.net/uFzDw.png
The image on the right showcases my current setup.
I attempted to achieve this by following a solution from this answer: How to cut a circular part from an image?
However, it appears that the mask only works for images and not buttons.
Below is a snippet of code from my application:
<b-button pill
class="notification"
:class="{ actived: isActive}"
@click="showNotif">
<b-icon-bell></b-icon-bell>
<span class="badge">3</span>
</b-button>
// Within my SCSS file
.notification {
width: 40px;
height: 40px;
background-color: $white;
margin-right: 3%;
border-color: transparent;
& .b-icon {
margin: 0 0 0 -4px;
width: 24px;
height: 24px;
font-family: FuturaStd;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
text-align: center;
color: $bluey-grey;
}
.badge {
position: absolute;
top: 5px;
padding: 3px 6px;
border-radius: 50%;
background: $golden-yellow;
color: white;
}
}