Version:

Install ​

Maven ​

xml
<dependency>
    <groupId>de.mate_ds</groupId>
    <artifactId>mate-badge-flow</artifactId>
</dependency>

Import ​

java
import de.mate_ds.flow.component.badge.Badge;
import de.mate_ds.flow.component.badge.BadgeVariant;
import de.mate_ds.flow.component.icon.Icon;
import de.mate_ds.flow.component.icon.MaterialSymbol;
import com.vaadin.flow.component.html.Span;

Variants ​

Default ​

java
Badge badge = new Badge("Default");

Neutral ​

java
Badge badge = new Badge("Neutral");
badge.addThemeVariants(BadgeVariant.NEUTRAL);

Warning ​

java
Badge badge = new Badge("Warning");
badge.addThemeVariants(BadgeVariant.WARNING);

Danger ​

java
Badge badge = new Badge("Danger");
badge.addThemeVariants(BadgeVariant.DANGER);

Success ​

java
Badge badge = new Badge("Success");
badge.addThemeVariants(BadgeVariant.SUCCESS);

Icon ​

java
Badge badge = new Badge();
badge.add(new Icon(MaterialSymbol.SymbolInfo));
badge.add(new Span("Icon"));

Ellipsis ​

Fixed width with text truncation for overflow.

java
Badge badge = new Badge("Ellipsis because the text is too long and should not be completely visible");
badge.getElement().getStyle().setWidth("100px");

Auto Expand ​

Expands to fill available space, e.g. inside a grid cell.

java
Badge badge = new Badge("Auto expand for example inside a grid cell");
badge.addThemeVariants(BadgeVariant.AUTO_EXPAND);
badge.getElement().getStyle().setWidth("100px");