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" |
| 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.