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'