Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Badge

Badges are colored text elements containing small bits of information. They are used for labelling content, displaying metadata and/or highlighting information.

Open in a
new tab
Span pending = new Span("Pending");
pending.getElement().getThemeList().add("badge");

Span confirmed = new Span("Confirmed");
confirmed.getElement().getThemeList().add("badge success");

Span denied = new Span("Denied");
denied.getElement().getThemeList().add("badge error");

Span onHold = new Span("On hold");
onHold.getElement().getThemeList().add("badge contrast");
Note
Import styles

Badge is a set of CSS classes rather than a web / Flow component. The Badge-specific CSS classes are available as part of the Lumo theme. To use these classes in your application, enable them in your theme’s theme.json:

{
  "lumoImports": [<...>, "badge"]
}

The theme.json is located in the theme folder at /frontend/themes/<my-theme>/theme.json.

Label

Badges should contain a label. Labels should be clear, concise, and written using sentence case. Aim for 1 to 2 words.

Icons

Badges can contain icons in addition to text. Icons can be placed on either side of the text.

Open in a
new tab
// Icon before text
Span pending1 = new Span(createIcon(VaadinIcon.CLOCK), new Span("Pending"));
pending1.getElement().getThemeList().add("badge");

// Icon after text
Span pending2 = new Span(new Span("Pending"), createIcon(VaadinIcon.CLOCK));
pending2.getElement().getThemeList().add("badge");

...

private Icon createIcon(VaadinIcon vaadinIcon) {
    Icon icon = vaadinIcon.create();
    icon.getStyle()
            .set("padding", "var(--lumo-space-xs")
            .set("box-sizing", "border-box");
    return icon;
}
Note
Use icons sparingly
The benefit of icons should be weighed against the visual noise it adds.

Icon-Only

Badges can also be used with icons without a label. For accessibility, a tooltip and aria-label attribute is recommended to ensure all users can identify their meaning.

Open in a
new tab
Icon confirmed = createIcon(VaadinIcon.CHECK, "Confirmed");
confirmed.getElement().getThemeList().add("badge success");

Icon cancelled = createIcon(VaadinIcon.CLOSE_SMALL, "Cancelled");
cancelled.getElement().getThemeList().add("badge error");

...

private Icon createIcon(VaadinIcon vaadinIcon, String label) {
    Icon icon = vaadinIcon.create();
    icon.getStyle().set("padding", "var(--lumo-space-xs");
    // Accessible label
    icon.getElement().setAttribute("aria-label", label);
    // Tooltip
    icon.getElement().setAttribute("title", label);
    return icon;
}

Icon-only badges should primarily be used for extremely common recurring content with highly standardized, universally understood icons (such as checkmark for "yes"), and for content that is repeated for example in lists and tables.

Open in a
new tab
grid.addColumn(UserPermissions::getName).setHeader("Name");
grid.addComponentColumn(userPermissions ->
        createPermissionIcon(userPermissions.getView()))
        .setHeader("View");
grid.addComponentColumn(userPermissions ->
        createPermissionIcon(userPermissions.getComment()))
        .setHeader("Comment");
grid.addComponentColumn(userPermissions ->
        createPermissionIcon(userPermissions.getEdit()))
        .setHeader("Edit");

...

private Icon createPermissionIcon(boolean hasPermission) {
    Icon icon;
    if (hasPermission) {
        icon = createIcon(VaadinIcon.CHECK, "Yes");
        icon.getElement().getThemeList().add("badge success");
    } else {
        icon = createIcon(VaadinIcon.CLOSE_SMALL, "No");
        icon.getElement().getThemeList().add("badge error");
    }
    return icon;
}

private Icon createIcon(VaadinIcon vaadinIcon, String label) {
    Icon icon = vaadinIcon.create();
    icon.getStyle().set("padding", "var(--lumo-space-xs");
    // Accessible label
    icon.getElement().setAttribute("aria-label", label);
    // Tooltip
    icon.getElement().setAttribute("title", label);
    return icon;
}

Theme Variants

Badge features theme variants for different sizes, colors, and shapes. You can combine any theme variants together.

Size

Badges have two different sizes you can use: the default (normal) and small. Use the small theme variant to make a badge smaller, for example when space is limited or for compact parts of the UI.

Open in a
new tab
Span pending = new Span("Pending");
pending.getElement().getThemeList().add("badge small");

Span confirmed = new Span("Confirmed");
confirmed.getElement().getThemeList().add("badge success small");

Span denied = new Span("Denied");
denied.getElement().getThemeList().add("badge error small");

Span onHold = new Span("On hold");
onHold.getElement().getThemeList().add("badge contrast small");

Color

Badges have four different color variants: default, success, error and contrast. The color variants can be paired with the primary theme variant for additional emphasis.

Open in a
new tab
// Default variant
Span pending = new Span("Pending");
pending.getElement().getThemeList().add("badge");

// Primary variant
Span pendingPrimary = new Span("Pending");
pendingPrimary.getElement().getThemeList().add("badge primary");
Variant Theme name Usage recommendations

Normal

Default style. Recommended for informational messages. Note that this style may be confused with a Button or link.

Success

Success

Highlight positive outcomes, such as when a task or operation is completed.

Error

Error

Use the error theme variant to communicate alerts, failures, or warnings.

Contrast

Contrast

A high-contrast version that improves legibility and distinguishes the badge from the rest of the UI. Recommended for neutral badges (that don’t communicate success or errors).

Primary

Primary

Used for important information and/or to draw extra attention to your badge. Can be combined with all other theme variants.
Note
Accessibility
Assistive technologies, such as screen readers, interpret badges solely based on their content. Without proper context, they may end up confusing the user. If you’re using colors and icons to convey information, provide the same info via aria-label to ensure screen readers can interpret the info.

Shape

Applying the pill theme variant produces a badge with rounded corners. It can aid in making badges and buttons more distinct from one another.

Open in a
new tab
Span pending = new Span("Pending");
pending.getElement().getThemeList().add("badge pill");

Span confirmed = new Span("Confirmed");
confirmed.getElement().getThemeList().add("badge success pill");

Span denied = new Span("Denied");
denied.getElement().getThemeList().add("badge error pill");

Span onHold = new Span("On hold");
onHold.getElement().getThemeList().add("badge contrast pill");

Use Cases

Highlighting and Distinguishing Information

A typical use case for badges is to highlight an item’s status, for example in a Grid.

Open in a
new tab
grid.addComponentColumn(report ->
        createStatusBadge(report.getStatus()))
        .setHeader("Status");

...

private Span createStatusBadge(String status) {
    String theme;
    switch (status) {
        case "In progress":
            theme = "badge primary";
            break;
        case "Completed":
            theme = "badge success primary";
            break;
        case "Cancelled":
            theme = "badge error primary";
            break;
        default:
            theme = "badge contrast primary";
            break;
    }
    Span badge = new Span(status);
    badge.getElement().getThemeList().add(theme);
    return badge;
}

They’re also often used for displaying metadata tags.

Interactive Content

Badges can house interactive content such as Anchors and Buttons. For example, Badges that highlight active filters might contain a "Clear" Button which removes the associated filter.

Open in a
new tab
HorizontalLayout badges = new HorizontalLayout();
badges.getStyle().set("flex-wrap", "wrap");

ComboBox<String> comboBox = new ComboBox<>("Profession");
comboBox.setItems(DataService.getProfessions());
comboBox.addValueChangeListener(e -> {
    Span filterBadge = createFilterBadge(e.getValue());
    badges.add(filterBadge);
});

...

private Span createFilterBadge(String profession) {
    Button clearButton = new Button(VaadinIcon.CLOSE_SMALL.create());
    clearButton.addThemeVariants(ButtonVariant.LUMO_CONTRAST, ButtonVariant.LUMO_TERTIARY_INLINE);
    clearButton.getStyle().set("margin-inline-start", "var(--lumo-space-xs)");
    // Accessible button name
    clearButton.getElement().setAttribute("aria-label", "Clear filter: " + profession);
    // Tooltip
    clearButton.getElement().setAttribute("title", "Clear filter: " + profession);

    Span badge = new Span(new Span(profession), clearButton);
    badge.getElement().getThemeList().add("badge contrast pill");

    // Add handler for removing the badge
    clearButton.addClickListener(event -> {
        badge.getElement().removeFromParent();
    });

    return badge;
}

Counter

Badges can be used as counters, for example, to show the number of unread/new messages, selection count, etc.

Open in a
new tab
Tabs tabs = new Tabs(
        createTab("Inbox", 12),
        createTab("Important", 3),
        createTab("Spam", 45),
        createTab("Archive", 23)
);

...

private static Tab createTab(String labelText, int messageCount) {
    Span label = new Span(labelText);
    Span counter = new Span(String.valueOf(messageCount));
    counter.getElement().getThemeList().add("badge pill small contrast");
    counter.getStyle().set("margin-inline-start", "var(--lumo-space-s)");
    // Accessible badge label
    String counterLabel = String.format("%d unread messages", messageCount);
    counter.getElement().setAttribute("aria-label", counterLabel);
    counter.getElement().setAttribute("title", counterLabel);

    return new Tab(label, counter);
}

Assistive technologies, such as screen readers, interpret badges solely based on their content. Without proper context, they may end up confusing the user. To provide context for people using screen readers, set the badge’s aria-label attribute.

Best Practises

Badge vs Button

Badges and Buttons are similar in appearance. This might lead users to think badges are interactive.

Placement, language, shape, and color can all help mitigate any confusion. First, badges should not be labelled with active verbs. They are not actions, but rather static text/content. Second, avoid placing badges directly next to Buttons, in particular if they’re using similar themes. The pill theme variant may aid in making badges and Buttons more distinct from one another.

6C76C649-BC5B-46EB-BFBB-4C2730DADA8F