Badge

(part of package 'Bootstrap Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

The Badge component displays a small tag-like element that can function as either an interactive button or a static label. It shows dynamic text along with an optional secondary badge value (often used to indicate counts or status) and supports customizable styles and event handling.

This is a reference page; many components have detailed usage guides here.

Properties

badgeText

The secondary badge text, often used to display a count or additional information. Type: Tagstring

---

displayType

Specifies the display type of the badge. Possible values are "BUTTON" (for interactive badges) and "LABEL" (for static display). Type: String Default Value: "BUTTON"

---

enabled

Indicates whether the badge is enabled for user interaction. Type: Enabled Default Value: true

---

imageStyleClass

CSS style classes for an image that may be displayed with the badge. Type: Styleclass

---

location

The location of the badge component within its parent container. Type: Point

---

styleClass

Additional CSS style classes for customizing the badge appearance. Type: Styleclass

---

text

The main text displayed on the badge. This text is dynamic and supports internationalization. Type: Tagstring

---

toolTipText

Tooltip text displayed when hovering over the badge (supports internationalization). Type: Tagstring

---

visible

Determines whether the badge is visible. Type: Visible

---

Events

onAction(event)

Fired when the badge is clicked.

Parameters:

• {JSEvent} event The event object containing details about the click event e.g. target element, mouse coordinates

---

onDoubleClick(event)

Fired when the badge is double-clicked.

Parameters:

• {JSEvent} event The event object containing details about the double-click event e.g. target element, click timing

---

onRightClick(event)

Fired when the badge is right-clicked.

Parameters:

• {JSEvent} event The event object containing details about the right-click event e.g. target element, context menu trigger

---

---