Badge brukes for å indikere status eller informere om elementer som kan kreve brukerens oppmerksomhet og som de bør ta hensyn til.
Badge-props
Varianter
Badge inneholder varslene BulletBadge og NotificationBadge, i tillegg til StatusBadge, som er deprecated. Til felles har de disse variantene:
- Primary
- Success
- Warning
- Negative
- Information
- Neutral
Notification badge
NotificationBadge er en visuell indikator for numeriske verdier.
Denne komponenten er egnet for å vise et varsel på et UI-element som kan kreve brukerens oppmerksomhet og som de bør ta hensyn til.
En NotificationBadge bør plasseres øverst til høyre relativt til elementet NotificationBadge tilhører.
Unngå å bruk komponenten alene.
Bullet badge
<BulletBadge> er en tekstkomponent med en farget punkttegn.
Den kan brukes for visning av status og bør ikke inneholde lange setninger.
Komponenten kan for eksempel brukes for å vise status i en liste eller tabell etc.
Komponenten tilbys i ulike farger for å indikere hvilke status et objekt eller element har.
Status badge
StatusBadge og Badge med type="status" er deprecated. Bruk Tag i stedet.
Tag dekker begge bruksområdene StatusBadge hadde: statusmarkering med success, warning, negative og information, og kategorimerking med ti kategorifarger, der neutral er en av dem.
variant="primary" er ikke videreført – bruk variant="neutral".
Komponenten fungerer fortsatt og brekker ikke, men den får ingen videreutvikling.
Retningslinjer
Universell utforming
Farger og kontrast: Sørg for at fargen på badge har tilstrekkelig kontrast i forhold til bakgrunnen (minst 4.5:1 for tekst og 3:1 for dekorative elementer).
Tekstalternativer: For bullet-badges må det legges til en beskrivende tekst som kan leses av skjermlesere. En bullet-badge uten tekst bryter WCAG 2.1, informasjon skal ikke kun kommuniseres med farge eller form.
ARIA-roller og labels: Bruk aria-label eller aria-describedby for å forklare hva bullet-badgen representerer.
Kilder:
Props
StatusBadge
Deprecated. Se Tag for erstatningen.
import { StatusBadge } from '@entur/layout';Denne komponenten har ingen props
BulletBadge
import { BulletBadge } from '@entur/layout';Denne komponenten har ingen props
NotificationBadge
import { NotificationBadge } from '@entur/layout';Denne komponenten har ingen props