putting a badge on a button


Looking at the Quick Tickets dashboard, there’s an example of how to put a badge on a NativeButton, something like:

button.setCaption("Button Name "+<span class=\"badge\">1</span>"

So the rest is done in CSS.

I was wondering if there’s a “native” way of doing this in Vaadin? Above seems a bit hacky, although I suppose it does work! I do actually need something slightly more complex where I have a fairly tall Button and I want 3 different badges on it. Data bound badges would be awesome.


Unfortunately there’s no built-in way to achieve this. You can either use raw HTML in the caption (build some utility class around the functionality so you don’t have to build the HTML all the time), or use something like the
Overlays add-on
to position labels on top of the button.