How to enable badge CSS classes in Vaadin 14.7.x when not using custom theme?

Viewed 273

From the documentation:

The Badge-specific CSS classes are available as part of the Lumo theme. To use these classes in your application, enable them in your theme’s theme.json

And Lumo Badges describes how:

@JsModule("@vaadin/vaadin-lumo-styles/badge.js") 
// Here, we add the style sheet to   the global scope 
@CssImport(include = "lumo-badge")

However, this does not work (CssImport also requires a value). What should this value be? Where can i find these ccs-files in my Vaadin project?

1 Answers

The easies way is to use Badge add-on from the Directory. It gives you easy to use Java API for Lumo badges. You can also look via links the GitHub repo how it has been implemented.

Related