Badge

npm install @entur/layout

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

Varianter

Badge inneholder varslene StatusBadge, BulletBadge og NotificationBadge. Til felles har de disse variantene:

• Primary
• Success
• Warning
• Negative
• Information
• Neutral

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.

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.

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.

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:

• 1.1.1 Ikke-tekstlig innhold
• 1.3.3 Sensoriske egenskaper

Props

StatusBadge

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