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:
AttachNotifier, DetachNotifier, HasElement, HasSize, HasStyle, HasText, HasTheme, HasThemeVariant<BadgeVariant>, Serializable
@Tag("vaadin-badge") @NpmPackage(value="@vaadin/badge", version="25.1.0-alpha9") @JsModule("@vaadin/badge/src/vaadin-badge.js") public class Badge extends Component implements HasSize, HasText, 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:

  • 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(Component icon)
      Creates a badge with an icon inside.
      Parameters:
      icon - the icon inside the badge
      See Also:

    • Badge

      public Badge(String text, 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, 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(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(Signal<String> textSignal, 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(AttachEvent attachEvent)
      Description copied from class: Component
      Called when the component is attached to a UI.

      This method is invoked before the AttachEvent is fired for the component. Make sure to call super.onAttach when overriding this method.

      Overrides:
      onAttach in class Component
      Parameters:
      attachEvent - the attach event

    • 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 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 HasText
      Returns:
      the text content, or an empty string if not set

    • bindText

      public void bindText(Signal<String> textSignal)
      Description copied from interface: HasText
      Binds a Signal's value to the text content of this component and keeps the text content synchronized with the signal value while the element is in attached state. When the element is in detached state, signal value changes have no effect. null signal unbinds the existing binding.

      While a Signal is bound, any attempt to set the text content manually throws BindingActiveException. Same happens when trying to bind a new Signal while one is already bound.

      Example of usage: 

       ValueSignal<String> signal = new ValueSignal<>("");
 Span component = new Span("");
 add(component);
 component.bindText(signal);
 signal.set("text"); // The component text content is set to "text"
      Specified by:
      bindText in interface HasText
      Parameters:
      textSignal - the signal to bind, not null
      See Also:

    • 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(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(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 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(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 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