available 1required 23Kbug 4in process 5in warehouse 67$solution provided 8pending release 9customer action 10This would truncate as it is too long
Badge with Icon
The ui5-badge is a small non-interactive component which contains text information and color chosen from a list of predefined color schemes. It serves the purpose to attract the user attention to some piece of information (state, quantity, condition, etc.).
If the text is longer than the width of the component, it doesn’t wrap, it shows ellipsis.
When truncated, the full text is not visible, therefore, it’s recommended to make more space for longer texts to be fully displayed.
Colors are not semantic and have no visual representation in High Contrast Black (sap_belize_hcb) theme.
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Defines the color scheme of the ui5-badge. There are 10 predefined schemes. Each scheme applies different values for the background-color and border-color. To use one you can set a number from "1" to "10". The colorScheme"1" will be set by default.
Note: Color schemes have no visual representation in High Contrast Black (sap_belize_hcb) theme.
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.
Defines the text of the ui5-badge. Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Defines the ui5-icon to be displayed in the ui5-badge.
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteBelizeHigh Contrast BlackHigh Contrast White