Badge component | Vaadin components

Docs
1

This topic is the discussion thread for the Vaadin documentation page Badge component | Vaadin components.

Questions, feedback, and comments are welcome here.

2

Hi All

I don’t understand the Api for getThemeList()

You write

getThemeList().add("badge success");

I would have expected that it is used like this:

getThemeList().addAll("badge");

getThemeList().addAll("success");

Does this make a difference?

3

At the moment unfortunately, Badge is not a component. It is a Span with a style setting.

4

There is an add-on component in Directory which wraps Lumo Badge styles as a component https://vaadin.com/directory/component/badge

5 
.getElement().getThemeList().add("badge success");

and others badge themes like "warning", "error" do not work in Vaadin V25.0.2

6

They only work with the Lumo theme, not with base styles or the Aura theme. A proper Badge component is coming, but in the meantime, you can copy these styles to your project to get display similar badges: https://github.com/vaadin/web-components/blob/main/dev/aura/badge.css

Instead of theme names, you use more traditional CSS class names. To get the same style as "badge success" use `addClassNames("aura-badge", "aura-accent-green")`. For warning, use "aura-accent-yellow" and for error use "aura-accent-red".

7

The css file you referenced does not bring an 'aura-badge' class

8

That CSS file was removed from the main branch now that we have the official Badge component coming in v25.1: https://vaadin.com/docs/next/components/badge

But earlier the file did include the `.aura-badge` classname: https://github.com/vaadin/web-components/blob/d8b7cd7c3a1b53626ec592948c1b0f379230c0a9/dev/aura/badge.css#L1

9

Thanks a lot for this component,

Well, I had a span with a listener, but to do it with the Badge, I'm using this code:


badge.getElement().addEventListener(“click”, e -> {
    log.info(“ Test {}”, “dummy”);
});
10

You could consider placing the badge inside a button, if you want it to be clickable. You can use ButtonVariant.TERTIARY to reduce the visual weight of the button itself, and add a bit of custom CSS to remove the padding if needed.

If you want the badge itself to be clickable, you need to make sure it’s focusable and clickable with the keyboard as well, not just with the mouse, and call `setAriaRole("button")` on it as well so that screen readers and other accessibility software recognize it as a clickable element.