Badge List¶

A Vaadin Flow add-on that provides a responsive badge list component with automatic overflow handling.

Overview¶

Use the Badge List add-on when you need to display a dynamic collection of badges inside a container and want overflow handled automatically. When the badges exceed the available width, the component collapses the excess into an overflow badge that shows a count of the hidden items. Clicking the overflow badge reveals the full list in a dropdown.

Features¶

Badges that exceed the container width collapse automatically into an overflow badge.
Overflow badge displays the count of hidden items.
Clicking the overflow badge opens a dropdown showing the hidden badges.
Label support via HasLabel.
Theme and size customization via HasTheme and HasSize.

Supported versions¶

Add-on version	Vaadin version
1.x	24–25
2.x	25.1+

Prerequisites¶

Starting from version 2.x, the add-on uses Vaadin's native Badge component (com.vaadin.flow.component.badge.Badge), which is currently experimental. You must enable it by adding the following to your src/main/resources/vaadin-featureflags.properties file:

com.vaadin.experimental.badgeComponent=true

Without this flag, the Badge component will not be available at runtime.

Installation¶

From the Vaadin Directory¶

Available in the Vaadin Directory.

Maven dependency¶

<dependency>
    <groupId>com.flowingcode.vaadin.addons</groupId>
    <artifactId>badge-list-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage¶

In the latest version (2.x), create Badge instances from Vaadin's native com.vaadin.flow.component.badge.Badge and pass them to BadgeList:

import com.vaadin.flow.component.badge.Badge;
import com.flowingcode.vaadin.addons.badgelist.BadgeList;

// Basic usage with a list of badges
List<Badge> badges = Arrays.asList(
    new Badge("ADMIN"),
    new Badge("USERS"),
    new Badge("MODERATOR"),
    new Badge("DEV1"),
    new Badge("DEV2")
);
BadgeList badgeList = new BadgeList(badges);

// With a field label
BadgeList badgeList = new BadgeList("Roles");
badgeList.setBadges(badges);

// Update badges after construction
badgeList.setBadges(updatedBadges);

Refer to the Vaadin documentation for available theme variants and configuration options on the Badge component itself.

Special configuration when using Spring¶

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference¶

Headline types exposed by the add-on:

BadgeList — the responsive badge list component; implements HasTheme, HasSize, and HasLabel.
BadgeList() — creates an empty instance.
BadgeList(String label) — creates an instance with the given label.
BadgeList(List<Badge> badges) — creates an instance pre-populated with the supplied badges.
void setBadges(List<Badge> badges) — replaces the current badges with the supplied list.

In the latest version (2.x), Badge is Vaadin's native com.vaadin.flow.component.badge.Badge. For the full add-on API, browse the published JavaDoc.

Demo¶

A live demo is available at addonsv25.flowingcode.com/badge-list. To run the demo locally:

git clone https://github.com/FlowingCode/BadgeList.git
cd BadgeList
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code¶

BadgeList on GitHub — distributed under Apache License 2.0.