Grunnmuren - OBOS' Design System

Badge brukes for å kategorisere, merke eller organisere innhold ved hjelp av nøkkelord som beskriver dem.

Egnet til:

Når man skal kategorisere innhold
Når man skal skille ut viktig informasjon, for eksempel "Frist for forkjøp"

Uegnet til:

Når noe skal være interaktivt. Bruk heller TagGroup når det skal være mulig å filtrere

Relaterte komponenter

Card

Varianter

Badge kan brukes i forskjellige farger og størrelser, og med eller uten ikon.

<>
    <Badge color="mint">mint</Badge>
    <Badge color="sky">sky</Badge>
    <Badge color="blue-dark">blue-dark</Badge>
    <Badge color="green-dark">green-dark</Badge>
    <Badge color="gray-dark">gray-dark</Badge>
    <Badge color="white">white</Badge>
</>

Størrelse

Badge kan brukes i tre ulike størrelser: Small, Medium, Large.

<>
  <Badge size="small" color="mint">mint</Badge>
  <Badge size="medium" color="mint">mint</Badge>
  <Badge size="large" color="mint">mint</Badge>
</>

Kontekst

Badge kan se litt forskjellig ut avhengig av kontekst. I Card ser komponenten forskjellig ut avhengig av hvor den plasseres.

<Card variant="outlined">
    <Media>
      <Badge color="mint" size="large">
        Bostart
      </Badge>
      <img alt="" src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg" />
    </Media>
    <Content>
      <Heading level={3}>
        <CardLink href="#card">Bolig</CardLink>
      </Heading>
      <Badge color="mint" size="small">
        Visning
      </Badge>
    </Content>
  </Card>

Retningslinjer

Hold deg til en kort og konsis tekst

Ikke bruk kun ikon i en badge

Formatering

Anatomi

Label Hold denne kort og konsis, og ha helst ett beskrivende ord.
Ikon Velg et ikon som er relevant for label-teksten.
Container

Universell utforming

Husk på

Teksten bør inneholde kontekst, slik at det gir mening når det blir lest opp av skjermlesere
Fargen på badge er ikke nok for å gi betydning for en badge, den vil ikke bli opplest av skjermlesere, og det er ikke tilstrekkelig med kun farge som indikasjon for de med svakt eller dårlig syn. Sørg for at informasjonen som er betegnet fargen også kommer tydelig frem i innholdet (via tekst og ikon). Du kan også legge til alternative hjelpemidler, som ekstra skjult tekst som kun leses av skjermleser.

Sjekkliste

✓ Badge har tydelig og konsis tekst (max 2 ord)

✓ Jeg bruker mer enn farge for å skille mellom badges

✓ Hvis jeg bruker ikon i en badge, så inneholder den også en beskrivende tekst

✓ Badge har tekst som refererer til konteksten den opptrer i

Prop	Description	Default
`color?`		-
`size?`		-
`className?`		-
`ref?`	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}	-
`key?`		-

Badge

Innhold