Using Vaadin Lumo Badges

Using Vaadin Lumo Badges is fairly simple. All you need to know is, what are the themes available and how does they look like.

When I started looking for sample java code, I did not find anything straight. So, putting here some examples so that it will be easy for my future reference and you. Here is the sample code and some beautiful color screen prints showing all the varieties of badge themes available in Vaadin.

@Route
@CssImport(value = "./styles/shared-styles.css", include = "lumo-badge")
@JsModule("@vaadin/vaadin-lumo-styles/badge.js")

public class MainView extends VerticalLayout {


    @PostConstruct
    public void init() {

        add(createBadges("Colors", "badge", "badge success", "badge error", "badge contrast"));
        add(createBadges("Primary", "badge primary", "badge success primary", "badge error primary", "badge contrast primary"));
        add(createBadges("Small", "badge small", "badge success small", "badge error small", "badge contrast small"));

        add(createBadges("Small Primary", "badge small primary", "badge success small primary", "badge error small primary", "badge contrast small primary"));
        add(createBadges("Pill", "badge pill", "badge success pill", "badge error pill", "badge contrast pill"));
        add(createBadges("Pill Primary", "badge primary pill", "badge success primary pill", "badge error primary pill", "badge contrast primary pill"));
        add(createEmptyBadges("Empty", "badge", "badge success", "badge error", "badge contrast"));

        add(createIconBadges("Colors Icon", "badge", "badge success", "badge error", "badge contrast"));
        add(createIconBadges("Primary Icon", "badge primary", "badge success primary", "badge error primary", "badge contrast primary"));
        add(createIconBadges("Small Icon", "badge small", "badge success small", "badge error small", "badge contrast small"));

        add(createIconBadges("Small Primary Icon", "badge small primary", "badge success small primary", "badge error small primary", "badge contrast small primary"));
        add(createIconBadges("Pill Icon", "badge pill", "badge success pill", "badge error pill", "badge contrast pill"));
        add(createIconBadges("Pill Primary Icon", "badge primary pill", "badge success primary pill", "badge error primary pill", "badge contrast primary pill"));


    }

    private HorizontalLayout createBadges(String title, String... themes) {

        add(new H2(title));

        HorizontalLayout hl = new HorizontalLayout();

        for (String theme : themes) {

            Span span = new Span(theme);
            span.getElement().setAttribute("theme", theme);
            hl.add(span);
        }

        return hl;
    }

    private HorizontalLayout createEmptyBadges(String title, String... themes) {

        add(new H2(title));

        HorizontalLayout hl = new HorizontalLayout();

        for (String theme : themes) {

            Span span = new Span();
            span.getElement().setAttribute("theme", theme);
            hl.add(span);
        }

        return hl;
    }

    private HorizontalLayout createIconBadges(String title, String... themes) {

        add(new H4(title));

        HorizontalLayout hl = new HorizontalLayout();

        for (String theme : themes) {

            IronIcon icon = new IronIcon("lumo","checkmark");
            icon.getElement().setAttribute("theme", theme);
            hl.add(icon);
        }

        return hl;
    }


}

Screenprints

For more information, visit https://cdn.vaadin.com/vaadin-lumo-styles/1.6.0/demo/badges.html

2 thoughts on “Using Vaadin Lumo Badges

  • December 8, 2020 at 8:34 am
    Permalink

    Thanks a lot it was very useful.

    Reply
  • July 15, 2020 at 4:03 am
    Permalink

    Thanks for posting this!!!! Their documentation website basically said nothing and without any clear exmaples

    Reply

Leave a Reply to Ali Garaei Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.