Badge
npmv2.3.20Badge brukes for å indikere status eller informere om elementer som kan kreve brukerens oppmerksomhet og som de bør ta hensyn til.
npm install @entur/layout
@import '@entur/layout/dist/styles.css';
Badge-props
Retningslinjer for bruk
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. Sørg for at bakgrunnsfargen har nok kontrast til fargen på punkttegnet.
Eksempel
Status badge
StatusBadge
er en visuell indikator som brukes til å vise statusen til et element.
Komponenten tilbys i ulike farger for å indikere hvilke status et element har.
StatusBadge
kan gi melding om advarsler, bekreftelser eller om noe er feil.
Vi kan for eksempel bruke denne komponenten for å indikere at en billett er utløpt, et forfalt eller betalt beløp, avvik, utdatert oppgjør etc.
StatusBadge
i farger benyttes gjerne til dynamisk statusmarkering, som er et resultat av insidenter/hendelser.
StatusBadge
i en default/neutral variant kan brukes for å kategorisere eller organisere elementer ved hjelp av nøkkelord som beskriver dem.
Bruk denne varianten når har mange kategorier, og brukeren trenger en måte å skille mellom dem.
For enkel skanning av de ulike, bør teksten ikke være på mer enn to ord.
StatusBadge
default/neutral benyttes gjerne til en mer statisk markering, som baserer seg på kategorisering.
Sørg for at bakgrunnsfargen har nok kontrast til fargen på StatusBadge
.
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.
Eksempel
Komponenter
BulletBadge
import { BulletBadge } from '@entur/layout';
StatusBadge
import { StatusBadge } from '@entur/layout';
NotificationBadge
import { NotificationBadge } from '@entur/layout';