How do I create a "no-style" badge?

Flow
1

In the past we had a Span with a default text and if I wanted to show it as an error I added the theme liste badge error:

image

Now with the new Badge component it is not possible to have a normal text anymore, as new Badge() renders at least the blue style:
image

Can we have a BadgeVariant.NONE that renders like a normal Span?

Background is, that I want to have a Badge component that shows normal value span-like and changes badge style on conditions for example:

public class TimeComponent extends Badge {

    public TimeComponent(Duration time) {
        super(time.toString());
        
        if (time.isNegative()) {
            addThemeVariants(BadgeVariant.ERROR);
        }
    }
}

Or can I somehow remove the blue badge style in my constructor?

Unfortunately, the new Badge component is for this reason not a drop-in replacement for the old span based badge approach.

2

You can set the background of a Badge to transparent with --vaadin-badge-background: transparent;

So you could, for example, do addClassName("no-badge"); and, in a stylesheet

vaadin-badge.no-badge {
  --vaadin-badge-background: transparent;
}

or, I suppose, inline it with Java: getStyle().set("--vaadin-badge-background", "transparent"); (but the former is better for your case where a lot of badges are rendered in a Grid, since the inline style doesn’t have to be repeated in the DOM for each row.

Alternatively, you could of course just render a Span where you don’t need badge styling at all, and apply the badge’s padding and font-size to it:

padding: var(--vaadin-badge-padding);
font-size: var(--vaadin-badge-font-size);

(These properties can be found in the Badge styling reference How to style the Badge component | Vaadin components)

3

And to control the text color, you can use the --vaadin-badge-text-color property (e.g., to make it follow the body text color, use --vaadin-badge-text-color: var(--lumo-body-text-color);)

4

Thank you. Yes, of course I can workaround by styling directly:

        if (isError()) {
            addThemeVariants(BadgeVariant.ERROR);
        } else {
            getStyle().set("--vaadin-badge-background", "none");
            getStyle().set("--vaadin-badge-text-color", "none");

          // or addClassNames(LumoUtility.Background.TRANSPARENT, LumoUtility.TextColor.BODY);
        }

But a much nicer api safe way would be:

        if (isError()) {
            addThemeVariants(BadgeVariant.ERROR);
        } else {
            addThemeVariants(BadgeVariant.NONE);
        }

Especially, if I have logic that combines BadgeVariants:

addThemeVariants(getVariants(example));

private BadgeVariant[] getVariants(Example example) {
 …
}

Other example where type safety is missing:

    private BadgeVariant[] getVariants(Example example) {
        if (example == null) {
            return new BadgeVariant[]{BadgeVariant.CONTRAST};
        }
        return new BadgeVariant[0];
}

Otherwise I will always have this if/else block to distinguish between a badge variant and “no-style”.