To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.
Easy to do with e.g. a label and CSS. Have 3 style names for the label and appropriate setters (setRed() would remove stylenames "yellow" and "green" and add "red"). Then, in your CSS just define the three colors.
What you put inside the Label is up to you, it can even be empty if you use background color and CSS size rules.
As a reference. There is already a thread about this topic which already has a small code snippet to create exactly that but with just 2 states. https://vaadin.com/forum#!/thread/3520075 As the OP of this thread already posted on that thread too I would suggest that all related post should be in this one as there is already a solution provided.