Komponenter
Badge
Badge er en liten visuell indikator som viser at det finnes ny eller ulest informasjon.
Ny funksjon
Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!
Egnet til:
- Vise antall uleste meldinger, oppgaver eller valgte filtre
- Indikere at det er ny eller oppdatert informasjon
Eksempler
Retningslinjer
Farge
Som hovedregel skal badgen være rød (danger), fordi accent (hovedhandlingsfargen) er blå. Det er mulig å tilpasse fargen til din kontekst med data-color.
Tilgjengelig tekst
Bruk tilgjengelig tekst som gir kontekst til badgen. Hvis badgen er forankret til f.eks. en knapp kan du sette aria-label på knappen. Labelteksten må starte med den visuelle teksten i knappen, f.eks. “Meldinger, 5 uleste”. Ellers setter du aria-label på selve badgen.
Props
Badge
children?
- Type:ReactNode
- Description:
Element the badge is anchored to. Leave empty to render the badge standalone.
data-color?
- Type:"accent" | "neutral" | "info" | "success" | "warning" | "danger" | "meta-purple" | "meta-lime" | "brand-beige" | "brand-blue" | "brand-magenta"
- Default:danger
- Description:
Badge color. @see 🏷️ {@link AkselColor } @see 📝 Documentation
count?
- Type:number
- Description:
Optional count to display inside the badge, normalized to a non-negative integer. Omit to render a dot.
maxCount?
- Type:number
- Default:99
- Description:
The maximum count to display inside the badge, normalized to a non-negative integer. Numbers above are displayed as
maxCount+.
className?
- Type:string
ref?
- Type:Ref<HTMLSpanElement>
- Description:
Allows getting a ref to the component instance. Once the component unmounts, React will set
ref.currenttonull(or call the ref withnullif you passed a callback ref). React Docs
