[](https://vaadin.com/directory/component/badge-list-add-on)
[](https://vaadin.com/directory/component/badge-list-add-on)
[](https://jenkins.flowingcode.com/job/BadgeList-addon)
[](https://mvnrepository.com/artifact/com.flowingcode.vaadin.addons/badge-list-addon)
[](https://javadoc.flowingcode.com/artifact/com.flowingcode.vaadin.addons/badge-list-addon)
# Badge List Add-on
Responsive badge list component.
## Features
* The badges that don't fit into the current width of the list collapse automatically into an overflow badge at the end.
* The overflow badge shows count of not visible badges.
* Clicking on the overflow count badge displays a list with the not visible badges.
* Read-only Binder Support
* Label Support
## Supported versions
Supported versions: Vaadin 24-25 (add-on version 1.x)
Supported versions: Vaadin 25.1+ (add-on version 2.x)
## Online demo
[Online demo here](http://addonsv25.flowingcode.com/badge-list)
## Download release
[Available in Vaadin Directory](https://vaadin.com/directory/component/badge-list-add-on)
### Maven install
Add the following dependencies in your pom.xml file:
```xml
com.flowingcode.vaadin.addons
badge-list-addon
X.Y.Z
```
```xml
vaadin-addons
https://maven.vaadin.com/vaadin-addons
```
For SNAPSHOT versions see [here](https://maven.flowingcode.com/snapshots/).
## Building and running demo
- git clone repository
- mvn clean install jetty:run
To see the demo, navigate to http://localhost:8080/
## Release notes
See [here](https://github.com/FlowingCode/BadgeList/releases)
## Issue tracking
The issues for this add-on are tracked on its github.com page. All bug reports and feature requests are appreciated.
## Contributions
Contributions are welcome. There are two primary ways you can contribute: by reporting issues or by submitting code changes through pull requests. To ensure a smooth and effective process for everyone, please follow the guidelines below for the type of contribution you are making.
#### 1. Reporting Bugs and Requesting Features
Creating an issue is a highly valuable contribution. If you've found a bug or have an idea for a new feature, this is the place to start.
* Before creating an issue, please check the existing issues to see if your topic is already being discussed.
* If not, create a new issue, choosing the right option: "Bug Report" or "Feature Request". Try to keep the scope minimal but as detailed as possible.
> **A Note on Bug Reports**
>
> Please complete all the requested fields to the best of your ability. Each piece of information, like the environment versions and a clear description, helps us understand the context of the issue.
>
> While all details are important, the **[minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example)** is the most critical part of your report. It's essential because it removes ambiguity and allows our team to observe the problem firsthand, exactly as you are experiencing it.
#### 2. Contributing Code via Pull Requests
As a first step, please refer to our [Development Conventions](https://github.com/FlowingCode/DevelopmentConventions) page to find information about Conventional Commits & Code Style requirements.
Then, follow these steps for creating a contribution:
- Fork this project.
- Create an issue to this project about the contribution (bug or feature) if there is no such issue about it already. Try to keep the scope minimal.
- Develop and test the fix or functionality carefully. Only include minimum amount of code needed to fix the issue.
- For commit message, use [Conventional Commits](https://github.com/FlowingCode/DevelopmentConventions/blob/main/conventional-commits.md) to describe your change.
- Send a pull request for the original project.
- Comment on the original issue that you have implemented a fix for it.
## License & Author
This add-on is distributed under Apache License 2.0. For license terms, see LICENSE.txt.
Badge List Add-on is written by Flowing Code S.A.
# Developer Guide
## Enabling the Badge component
Since version 2.0.0, this add-on uses the preview version of Badge component from Vaadin core (`com.vaadin.flow.component.badge.Badge`). As is currently an experimental feature it must be explicitly enabled in your project before using this add-on.
You can enable it in one of two ways:
- Through **Vaadin Copilot**, in the experimental features panel.
- By adding the following line to `src/main/resources/vaadin-featureflags.properties` in your project:
```properties
com.vaadin.experimental.badgeComponent=true
```
## Getting started
```java
Div div = new Div();
List roles = Arrays.asList("ADMIN", "USERS", "MOD", "DEV1", "DEV2");
List badges = new ArrayList<>();
roles.forEach(role -> badges.add(new Badge(role)));
BadgeList badgeList = new BadgeList(badges);
div.add(badgeList);
add(div);
```
## Special configuration when using Spring
By default, Vaadin Flow only includes ```com/vaadin/flow/component``` to be always scanned for UI components and views. For this reason, the add-on might need to be allowed in order to display correctly.
To do so, just add ```com.flowingcode``` to the ```vaadin.allowed-packages``` property in ```src/main/resources/application.properties```, like:
```vaadin.allowed-packages = com.vaadin,org.vaadin,dev.hilla,com.flowingcode```
More information on Spring scanning configuration [here](https://vaadin.com/docs/latest/integrations/spring/configuration/#configure-the-scanning-of-packages).