Badge
11.3.3
Badges are small status descriptors for UI elements. A badge usually consists of a small circle that appears in proximity to another object.
| Namn | Typ | Beskrivning |
|---|---|---|
ariaHidden | boolean | If true, the badge's label will be hidden from screen readers while remaining visually visible. |
ariaLabel | string | Accessible label for the badge container, useful when the badge conveys meaning through color alone (e.g. a small status dot). |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
isLoading | boolean | If true, a loading skeleton will be rendered instead of the component. |
lang | "sv" |
"en" | The language of the badge's label. |
negativeMargins | boolean | Negative margins. |
role | AriaRole | ARIA role for the badge container, e.g. "img" for a purely visual status indicator. |
wrapLabel | boolean | If true, the badge's label will be wrapped to the next line if it exceeds the width of the badge. |
color | BadgeColor | |
elevation | never | |
label | never | |
labelPosition | never | |
labelVariant | never | |
size * | "sm" |
npm install @sj-ab/component-library.ui.badgeSemantik
En Badge presenteras som vanlig text (<span>).
Färg som komplement
Se till att informationen som presenteras i en Badge går att förstå även för användare som inte kan se eller urskilja den färgade cirkeln.
Använd inte färgen i sig för att förmedla viktig information, till exempel förseningar
Använd den färgade cirkeln som komplement och förstärkning för den synliga texten
Importer av Badge
Repos med Badge
Senaste installerade version av Badge
Äldsta installerade version av Badge