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
Styling
Colors
When to use
Use wje-badge to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
color
| Description | The color of the badge element. Accepts any valid string primary, secondary, success, danger, warning, info, default. |
| Attribute | color |
| Type | string |
| Default | - |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native | The component's native wrapper. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-badge-border-radius | Border radius of the badge element. |
Slots
| Name | Description |
|---|---|
default | The badge's main content. |