I’ve pasted in one of the badge examples from https://vaadin.com/docs/latest/components/badge but get no styling.
If I had my own theme, the doc says I should add “badge” to lumoImports in theme.json
But, currently I don’t have any custom theme, so should be using Lumo out of the box. Is that not enough?
Lumo contains some modules that are no loaded by default, as they might conflict with existing styles in your app.
If you don’t want to use a theme folder (although that has been the recommended approach since V19 and V14.6), you should be able to load the module with this too:
@JsModule("@vaadin/vaadin-lumo-styles/badge.js")
There is also add-on component of Badge. This component uses the same Lumo Badge styles, it just gives easier to use Java API Badge - Vaadin Add-on Directory
@useful-whale , I’ve not been friends with themes and frontend, although it has gotten a lot better.
I worked around earlier problems by putting style.css and images in good-old src\main\webapp, and that works just fine.
This might be the first reason to use themes
@yummy-rhino, I saw that, but it seemed like overkill for adding 2 badges 
Does it still require me to add add “badge” to theme.json, or does it trigger a frontend build that includes it?
The component does the module loading for you.
As for the theme folder, it’s really not much different from loading styles with @CssImport (which I presume you’re using instead) – the main difference is that instead of themeFor="vaadin-component-name" in the annotation, you place component-injected stylesheets in components/vaadin-component-name.css
(And of course in V24 you can do most styling in just styles.css or whatever stylesheet you want to place them in, instead of having component-specific stylesheets)
1st added just dependency on org.vaadin.addons.mycompany:badge ( mycompany @yummy-rhino ?)
That did not help. The “badge” module did not seem to be included. (I only depended on it. I still only set css classes)
Then I did as was originally suggested; Added a theme, and then it worked.
It is a bit strange that lumo does not load “badge” by default, when your default (starter) themes does…
When all that is done, I see that “badge” was not exactly what I was after. Googling I see that it is my terminology that is off. What I wanted was “Notification badge”
Ie, something like this:
Googling, I see several examples, so it doesn’t look like it should be too hard to make, but the current badge is good enough for now
I just tested, even when dropping badge from theme.json, Badge component works for me with Vaadin 24.3.
It is a bit strange that lumo does not load “badge” by default
The system has been made to be as lean as possible by default. Also that has been the development path from Vaadin 14 to 23 and then 24. The latest versions load the bundle fragments progressively so that application loading at start would be minimized.
And at my end, it works great in dev, but our ci production build has lost all our styling, including the badge…
As far as I can see from the build log, vaadin:build-frontend noticed that “badge” was missing and rebuilt prod.bundle, but I see no trace of it or our own css in the running application.
Using browser DevTools I see that all of our --variables are gone.
We have optimizeBundle:false btw
Any suggestions?
When I build -Pproducion locally, I see that src\main\bundles\prod.bundle is updated, and in target I find my theme under META-INF\VAADIN\webapp\VAADIN\static\themes
However, is the css served from there, or is it supposed to be included in one of the generated js files in META-INF\VAADIN\webapp\VAADIN\build ?
I’ve just updated to 24.3.6 and run with a "clean package -Pproduction " build locally again.
Previously, all my styles.css from my Theme were gone. Now it is back.
My initial countSpan.getElement().getThemeList().add(“badge”) still doesn’t work, but new Badge(“xx”) does work.
I don’t understand this, but I prefer to work with the Badge class, so I’m happy.
The most concerning thing was that the Theme disappeared when I used 24.3.5. I’d like to understand that better.