Avatar

Kildekode på GitHub · Les som Markdown

Avatar viser et brukerbilde med automatisk fallback til initialer når bildet ikke kan lastes. Bygget på Radix UI Avatar.

Importering

import { Avatar, AvatarImage, AvatarFallback } from "@kilden/designsystem";

Grunnleggende bruk

<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
<Avatar>
  <AvatarFallback>ON</AvatarFallback>
</Avatar>
<Avatar>
  <AvatarFallback>KN</AvatarFallback>
</Avatar>
<Avatar>
  <AvatarFallback>AB</AvatarFallback>
</Avatar>
</div>

Ulike størrelser

Bruk Tailwind-klasser for å endre størrelse.

<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
<Avatar className="h-8 w-8">
  <AvatarFallback className="text-xs">S</AvatarFallback>
</Avatar>
<Avatar>
  <AvatarFallback>M</AvatarFallback>
</Avatar>
<Avatar className="h-14 w-14">
  <AvatarFallback className="text-lg">L</AvatarFallback>
</Avatar>
<Avatar className="h-20 w-20">
  <AvatarFallback className="text-xl">XL</AvatarFallback>
</Avatar>
</div>

Gruppe av avatarer

<div style={{ display: "flex" }}>
<Avatar className="border-2 border-white">
  <AvatarFallback>A</AvatarFallback>
</Avatar>
<Avatar className="-ml-3 border-2 border-white">
  <AvatarFallback>B</AvatarFallback>
</Avatar>
<Avatar className="-ml-3 border-2 border-white">
  <AvatarFallback>C</AvatarFallback>
</Avatar>
<Avatar className="-ml-3 border-2 border-white">
  <AvatarFallback className="text-xs">+3</AvatarFallback>
</Avatar>
</div>

Bruksanbefalinger

Inkluder alltid en fallback

Bilder kan feile. Bruk alltid AvatarFallback med initialer eller et ikon som reserveløsning.

Avatar brukt som produktbilde eller ikon

Ikke bruk for dekorative bilder

Avatar er ment for brukeridentifisering. For generelle bilder, bruk vanlige img-elementer.

Tilgjengelighet

AvatarImage aksepterer alt-tekst for skjermlesere
Fallback vises umiddelbart hvis det ikke er noe bilde, eller etter en kort forsinkelse mens bildet lastes
For rent dekorative avatarer, bruk alt="" på bildet

Props

Avatar

Arver alle props fra Radix Avatar.Root. Standard størrelse er h-10 w-10.

AvatarImage

Prop	Type	Default	Beskrivelse
`src`	`string`	—	URL til brukerbildet
`alt`	`string`	—	Alternativ tekst for bildet

AvatarFallback

Prop	Type	Default	Beskrivelse
`delayMs`	`number`	—	Forsinkelse i ms før fallback vises
`children`	`ReactNode`	—	Innhold (initialer, ikon)