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
The sample inserts the badge into a list item, where it functions as a short additional indicator, not as the main content.
Editing styles
Colors
The sample compares the colour variations of the component to make it easier to select the appropriate meaning state as well as the level of visual emphasis.
When to use
Use wje-badge to display content that improves the readability, scannability, or context of the information.
When not to use
Do not use it as a substitute for structured data where precise interaction is needed.
Accessibility
Add alternative text for images, legible contrasts and text equivalents for icons without description.
Recommended practices
- Compress media and use lazy loading for large lists.
- Keep information priorities consistent for tabs and lists.
- Do not repeat the same information in text and icon at the same time with no added value.
Attributes and properties
color
| Popis | Nastavuje farbu komponentu. |
| Atribút | color |
| Typ | string |
| Predvolené | - |
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
CSS custom variables
| Názov | Popis |
|---|---|
--wje-badge-border-radius | Vlastná CSS premenná, ktorá riadi zaoblenie rohov. |
Slots
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |