Looking at the mendix pages, this seems to be achieved by using 2 elements - the mail icon as a background and the counter with appropriate css styling.
I just had a quick test using the following in my css:
.updates-counter {
background: none repeat scroll 0 0 #FFFFFF !important;
border-radius: 8px 8px 8px 8px !important;
box-shadow: 0 2px 2px #186BA1 inset !important;
display: inline-block !important;
font-size: 10px !important;
height: 16px !important;
line-height: 16px !important;
position: relative !important;
right: 4px !important;
text-align: center !important;
top: -6px !important;
width: 16px !important;
}
.updates-wrapper {
background: url("ui/images/icons/Administration$mail.png") no-repeat scroll left center transparent !important;
padding-left: 10px;
position: relative;
right: 6px;
top: 3px;
}
and used the updates-counter for the class of the data, and updates-wrapper for the class of the containing table cell. This seems to give the correct layout.
You could model something easily by creating a notification object, associated to the user. By using the formloader widget, you can create a form which is showing the notifications and insert this formloader in your theming. This way you can show any form always fixed in your theming.