Badge

npm install @entur/layout

@import '@entur/layout/dist/styles.css';

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';