Package com.vaadin.flow.component.badge

Class Badge

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.badge.Badge
All Implemented Interfaces:
com.vaadin.flow.component.AttachNotifier, com.vaadin.flow.component.DetachNotifier, com.vaadin.flow.component.HasElement, com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasStyle, com.vaadin.flow.component.HasText, com.vaadin.flow.component.HasTheme, com.vaadin.flow.component.shared.HasThemeVariant<BadgeVariant>, Serializable
@Tag("vaadin-badge") @NpmPackage(value="@vaadin/badge", version="25.1.0-beta1") @JsModule("@vaadin/badge/src/vaadin-badge.js") public class Badge extends com.vaadin.flow.component.Component implements com.vaadin.flow.component.HasSize, com.vaadin.flow.component.HasText, com.vaadin.flow.component.shared.HasThemeVariant<BadgeVariant>
Badge is a component for displaying small pieces of information, such as statuses, counts, or labels. It can display plain text, a number, an icon, or a custom component, as well as combinations of these. Use theme variants to customize the badge's appearance. 
 Badge badge = new Badge("Completed", LumoIcon.CHECKMARK.create());
 badge.addThemeVariants(BadgeVariant.SUCCESS);
The dot variant renders the badge as a small dot indicator, visually hiding all content: 
 Badge badge = new Badge();
 badge.addThemeVariants(BadgeVariant.DOT);

Accessibility

When a Badge displays only an icon or a number, it may not provide enough context for screen reader users. To address this, you can add descriptive text via setText(String) and use the icon-only or number-only theme variant to hide the text visually while keeping it available to screen readers: 
 Badge badge = new Badge("new messages", 5); // announced as "5 new messages"
 badge.addThemeVariants(BadgeVariant.NUMBER_ONLY);
Author:
Vaadin Ltd
See Also:

  • Nested Class Summary

    Nested classes/interfaces inherited from interface com.vaadin.flow.component.HasText

    com.vaadin.flow.component.HasText.WhiteSpace

  • Constructor Summary

    Constructors
    Constructor
    Description
    Badge()
    Default constructor.
    Badge(com.vaadin.flow.component.Component icon)
    Creates a badge with an icon inside.
    Badge(com.vaadin.flow.signals.Signal<String> textSignal)
    Creates a badge with a text signal bound to it.
    Badge(com.vaadin.flow.signals.Signal<String> textSignal, com.vaadin.flow.component.Component icon)
    Creates a badge with a text signal and an icon inside.
    Badge(String text)
    Creates a badge with a text inside.
    Badge(String text, int number)
    Creates a badge with a text and a number inside.
    Badge(String text, int number, com.vaadin.flow.component.Component icon)
    Creates a badge with a text, a number, and an icon inside.
    Badge(String text, com.vaadin.flow.component.Component icon)
    Creates a badge with a text and an icon inside.

  • Method Summary

    Modifier and Type
    Method
    Description
    void
    bindNumber(com.vaadin.flow.signals.Signal<Integer> numberSignal)
    Binds the number property to the given signal.
    void
    bindText(com.vaadin.flow.signals.Signal<String> textSignal)
     
    com.vaadin.flow.component.Component
    getContent()
    Gets the component in the default slot of this badge.
    com.vaadin.flow.component.Component
    getIcon()
    Gets the component that is defined as the icon of this badge.
    Integer
    getNumber()
    Gets the number displayed in the badge.
    String
    getRole()
    Gets the ARIA role attribute of the badge.
    String
    getText()
    Gets the text content of this component.
    protected void
    onAttach(com.vaadin.flow.component.AttachEvent attachEvent)
     
    void
    setContent(com.vaadin.flow.component.Component content)
    Sets the given component as the content of this badge.
    void
    setIcon(com.vaadin.flow.component.Component icon)
    Sets the given component as the icon of this badge.
    void
    setNumber(Integer number)
    Sets the number to display in the badge.
    void
    setRole(String role)
    Sets the ARIA role attribute on the badge.
    void
    setText(String text)
    Sets the given string as the text content of this component.

    Methods inherited from class com.vaadin.flow.component.Component

    addListener, bindVisible, findAncestor, fireEvent, from, get, getChildren, getElement, getEventBus, getId, getListeners, getLocale, getParent, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getTranslation, getUI, hasListener, isAttached, isTemplateMapped, isVisible, onDetach, onEnabledStateChanged, removeFromParent, scrollIntoView, scrollIntoView, set, setElement, setId, setVisible

    Methods inherited from class java.lang.Object

    clone, equals, finalize, getClass, hashCode, notify, notifyAll, toString, wait, wait, wait

    Methods inherited from interface com.vaadin.flow.component.AttachNotifier

    addAttachListener

    Methods inherited from interface com.vaadin.flow.component.DetachNotifier

    addDetachListener

    Methods inherited from interface com.vaadin.flow.component.HasElement

    getElement

    Methods inherited from interface com.vaadin.flow.component.HasSize

    bindHeight, bindWidth, getHeight, getHeightUnit, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getWidth, getWidthUnit, setHeight, setHeight, setHeightFull, setMaxHeight, setMaxHeight, setMaxWidth, setMaxWidth, setMinHeight, setMinHeight, setMinWidth, setMinWidth, setSizeFull, setSizeUndefined, setWidth, setWidth, setWidthFull

    Methods inherited from interface com.vaadin.flow.component.HasStyle

    addClassName, addClassNames, bindClassName, getClassName, getClassNames, getStyle, hasClassName, removeClassName, removeClassNames, setClassName, setClassName

    Methods inherited from interface com.vaadin.flow.component.HasText

    getWhiteSpace, setWhiteSpace

    Methods inherited from interface com.vaadin.flow.component.HasTheme

    addThemeName, addThemeNames, bindThemeName, getThemeName, getThemeNames, hasThemeName, removeThemeName, removeThemeNames, setThemeName, setThemeName

    Methods inherited from interface com.vaadin.flow.component.shared.HasThemeVariant

    addThemeVariants, bindThemeVariant, removeThemeVariants, setThemeVariant, setThemeVariants, setThemeVariants

  • Constructor Details

    • Badge

      public Badge()
      Default constructor. Creates an empty badge.

    • Badge

      public Badge(String text)
      Creates a badge with a text inside.
      Parameters:
      text - the text inside the badge
      See Also:

    • Badge

      public Badge(com.vaadin.flow.component.Component icon)
      Creates a badge with an icon inside.
      Parameters:
      icon - the icon inside the badge
      See Also:

    • Badge

      public Badge(String text, com.vaadin.flow.component.Component icon)
      Creates a badge with a text and an icon inside.
      Parameters:
      text - the text inside the badge
      icon - the icon inside the badge
      See Also:

    • Badge

      public Badge(String text, int number)
      Creates a badge with a text and a number inside.
      Parameters:
      text - the text inside the badge
      number - the number to display in the badge
      See Also:

    • Badge

      public Badge(String text, int number, com.vaadin.flow.component.Component icon)
      Creates a badge with a text, a number, and an icon inside.
      Parameters:
      text - the text inside the badge
      number - the number to display in the badge
      icon - the icon inside the badge
      See Also:

    • Badge

      public Badge(com.vaadin.flow.signals.Signal<String> textSignal)
      Creates a badge with a text signal bound to it.
      Parameters:
      textSignal - the signal providing the text content
      See Also:

    • Badge

      public Badge(com.vaadin.flow.signals.Signal<String> textSignal, com.vaadin.flow.component.Component icon)
      Creates a badge with a text signal and an icon inside.
      Parameters:
      textSignal - the signal providing the text content
      icon - the icon inside the badge
      See Also:

  • Method Details

    • onAttach

      protected void onAttach(com.vaadin.flow.component.AttachEvent attachEvent)
      Overrides:
      onAttach in class com.vaadin.flow.component.Component

    • setText

      public void setText(String text)
      Sets the given string as the text content of this component.

      This method removes any existing text-content and replaces it with the given text. Other slotted children (such as icons) are preserved.

      Specified by:
      setText in interface com.vaadin.flow.component.HasText
      Parameters:
      text - the text content to set, or null to remove existing text

    • getText

      public String getText()
      Gets the text content of this component.
      Specified by:
      getText in interface com.vaadin.flow.component.HasText
      Returns:
      the text content, or an empty string if not set

    • bindText

      public void bindText(com.vaadin.flow.signals.Signal<String> textSignal)
      Specified by:
      bindText in interface com.vaadin.flow.component.HasText

    • setNumber

      public void setNumber(Integer number)
      Sets the number to display in the badge.
      Parameters:
      number - the number to display, or null to clear it

    • bindNumber

      public void bindNumber(com.vaadin.flow.signals.Signal<Integer> numberSignal)
      Binds the number property to the given signal.
      Parameters:
      numberSignal - the signal providing the number value

    • getNumber

      public Integer getNumber()
      Gets the number displayed in the badge.
      Returns:
      the number, or null if not set

    • setContent

      public void setContent(com.vaadin.flow.component.Component content)
      Sets the given component as the content of this badge.

      The content is placed in the default slot of the badge.

      Parameters:
      content - the content component, or null to remove it

    • getContent

      public com.vaadin.flow.component.Component getContent()
      Gets the component in the default slot of this badge.
      Returns:
      the content component, or null if not set

    • setIcon

      public void setIcon(com.vaadin.flow.component.Component icon)
      Sets the given component as the icon of this badge.

      The icon is placed in the icon slot of the badge.

      Parameters:
      icon - component to be used as an icon, or null to remove it

    • getIcon

      public com.vaadin.flow.component.Component getIcon()
      Gets the component that is defined as the icon of this badge.
      Returns:
      the icon of this badge, or null if the icon is not set

    • setRole

      public void setRole(String role)
      Sets the ARIA role attribute on the badge.
      Parameters:
      role - the ARIA role, or null to clear

    • getRole

      public String getRole()
      Gets the ARIA role attribute of the badge.
      Returns:
      the ARIA role, or null if not set