Gå til hovedinnhold
KOMPONENTER

Badge

npmv2.2.0

Badge 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';
NavnTypeDefault-verdiBeskrivelse
as?string | React.ElementType"span"

Elementet som wrapper badgen An override of the default HTML tag. Can also be another React component.

className?string

Ekstra klassenavn

childrenReactNode

Elementet som badge vil legges relativt til

variant"success" | "info" | "warning" | "primary" | "danger" | "neutral"

Hvilken type badge man vil ha

ref?any

StatusBadge

import { StatusBadge } from '@entur/layout';
NavnTypeDefault-verdiBeskrivelse
as?string | React.ElementType"span"

Elementet som wrapper badgen An override of the default HTML tag. Can also be another React component.

className?string

Ekstra klassenavn

childrenReactNode

Elementet som badge vil legges relativt til

variant"success" | "info" | "warning" | "primary" | "danger" | "neutral"

Hvilken type badge man vil ha

ref?any

NotificationBadge

import { NotificationBadge } from '@entur/layout';
NavnTypeDefault-verdiBeskrivelse
as?string | React.ElementType"span"

Elementet som wrapper badgen An override of the default HTML tag. Can also be another React component.

className?string

Ekstra klassenavn

childrenReactNode

Elementet som badge vil legges relativt til

variant"success" | "info" | "warning" | "primary" | "danger" | "neutral"

Hvilken type badge man vil ha

showZero?boolean false

Om 0 skal vises

max?number ++

Hva som er høyeste tallet før det legges på “+”

ref?any
Rediger denne siden på Bitbucket