The ui5-button-badge component defines a badge that appears in the ui5-button.
ES6 Module Import
import "@ui5/webcomponents/dist/ButtonBadge.js";
Properties
design
| Description | Defines the badge placement and appearance.
- InlineText - displayed inside the button after its text, and recommended for compact density.
- OverlayText - displayed at the top-end corner of the button, and recommended for cozy density.
- AttentionDot - displayed at the top-end corner of the button as a dot, and suitable for both cozy and compact densities. |
| Type | "InlineText" | "OverlayText" | "AttentionDot" (value descriptions in: ButtonBadgeDesign) |
| Default | "AttentionDot" |
| Since | 2.7.0 |
text
| Description | Defines the text of the component.
Note: Text is not applied when the design property is set to AttentionDot.
Note: The badge component only accepts numeric values and the "+" symbol. Using other characters or formats may result in unpredictable behavior, which is not guaranteed or supported. |
| Type | string |
| Default | "" |
| Since | 2.7.0 |
Slots
No slots available for this component.
Events
No events available for this component.
Methods
No methods available for this component.
CSS Parts
No CSS parts available for this component.
CSS Custom States
No CSS custom states available for this component.