Badge
Badges are inline-block elements that are informative and usually appear near another element. They are used as a notification that there are other elements associated with the element and inform the user of their number.
Basic usage
To use the Badge component, include it in the HTML with the required attributes.
List
Editing styles
Colors
Attributes and Properties
color
| Description | The color to use from your application's color palette. The default options are: "primary", "success", "warning", "warning", "complete", "info", and "menu". For more information on colors, visit Customization Basics. |
| Attribute | color |
| Type | "complete" ｜ "danger" ｜ "info" ｜ "menu" ｜ "primary" ｜ "success" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--wje-badge-border-radius | Adjusts the roundness of the element |
--wje-badge-padding-bottom | Adjusts the lower internal offset of the element |
--wje-badge-padding-inline | Adjusts the horizontal internal offset of the element |
--wje-badge-padding-top | Adjusts the upper internal offset of the element |
Slots
| Name | Description |
|---|---|
| `` | The contents are placed between the named slots. |
end | The content is placed on the right in the LTR and on the left in the RTL. |
icon-only | It should be applied to an icon in a button that does not contain text. |
start | The content is placed on the left in the LTR and on the right in the RTL. |