Badges aren't available for Material theme

[mvysny]

Description

Related to https://github.com/vaadin/web-components/issues/5379

The page at https://vaadin.com/docs/v23/components/badge says to add "badge" to "lumoImports". However, Material theme doesn't allow for custom themes and therefore there's no theme.json file.

Expected outcome

Either badges should work out-of-the-box, or there should be a documentation on how to add badges to the Material theme.

Minimal reproducible example

public class Badge extends Span implements HasTheme {
    public Badge() {
        setId(getClass().getSimpleName());
        getThemeNames().add("badge");
    }

    public Badge(@NotNull Component... components) {
        this();
        add(components);
    }

    public Badge(@NotNull String text) {
        this();
        setText(text);
    }

    /**
     * Adds theme variants to the component.
     *
     * @param variants
     *            theme variants to add
     */
    @NotNull
    public Badge addThemeVariants(@NotNull BadgeVariant... variants) {
        getThemeNames()
                .addAll(Stream.of(variants).map(BadgeVariant::getVariantName)
                        .collect(Collectors.toList()));
        return this;
    }

    /**
     * Removes theme variants from the component.
     *
     * @param variants
     *            theme variants to remove
     */
    public void removeThemeVariants(@NotNull BadgeVariant... variants) {
        getThemeNames().removeAll(
                Stream.of(variants).map(BadgeVariant::getVariantName)
                        .collect(Collectors.toList()));
    }

    /**
     * Set the badge color to a custom color. See the FreightCheckinGrid class for an example on how to use this; see CLG-105 for screenshots.
     * @param color for example "red" or "#b9b9b9".
     * @return this.
     */
    @NotNull
    public Badge setCustomColor(@Nullable String color) {
        getStyle().set("background-color", color);
        return this;
    }
}

public enum BadgeVariant {

    PRIMARY("primary"), SUCCESS("success"), ERROR("error"), CONTRAST("contrast"), PILL("pill"), SMALL("small");

    @NotNull
    private final String theme;

    BadgeVariant(@NotNull String theme) {
        this.theme = theme;
    }

    @NotNull
    public String getVariantName() {
        return theme;
    }

}

UI.getCurrent().add(new Badge("Demo").withThemeVariants(BadgeVariant.PRIMARY);

should work out-of-the-box, but currently renders a span without any formatting.

Steps to reproduce

Paste the above to skeleton starter

Environment

Vaadin version(s): 23.3.7+

Browsers

No response

[mvysny]

Workaround: use this extension: https://vaadin.com/directory/component/badge

[yuriy-fix]

Badges are lumo-specific, so this should be considered as an enhancement request.