The quickest, most lazy way to do it is with CSS.
Add this to your application.css
Code:
.WebButton.badge{position: relative;}
.WebButton.badge:after {
font-size: 15px;
background: #ff0000;
color: #fff;
padding: 0 6px;
vertical-align: top;
border-radius: 10px;
position: absolute;
top: -1px;
right: -1px;
}
.badge1:after{content:'1';}
.badge2:after{content:'2';}
.badge3:after{content:'3';}
.badge4:after{content:'4';}
.badge5:after{content:'5';}
.badge6:after{content:'6';}
.badge7:after{content:'7';}
.badge8:after{content:'8';}
.badge9:after{content:'9';}
.badge-more:after{content:'9+';}
On the button (I assumed a button in this example)
Code:
Set psCSSClass to 'badge badge8'
// To change it
Webset psCSSClass to 'badge badge4'