Avatar

@/components/ui/Avatar

Rund identitetsflate — bilde eller initial-fallback. AvatarGroup stabler flere med overlapp og en «+N».

Når brukes den

Bruk for å representere en PERSON eller ORGANISASJON — et styremedlem, en beboer, en leverandør.
Uten `src` (eller om bildet feiler å laste) faller den automatisk tilbake til initialer — den viser aldri et knekt bilde-ikon.
AvatarGroup for et lite, avgrenset utvalg («3 godkjennere») — `limit` samler resten i en «+N». Ikke bruk til en lang liste; det er ListRow sin jobb.
Ikke bruk som et generisk dekor-ikon — det er IconTile.

Eksempler

Størrelser

16/24/32/48/64px. 32 er standard.

<Avatar name="Kari Nordmann" size={48} />

Initial-fallback

To ord → forbokstav + etternavn. Ett ord → de to første tegnene.

Med bilde

Feiler bildet å laste, faller Avatar automatisk tilbake til initialer — samme markup, ingen ekstra håndtering fra kallstedet.

<Avatar name="Kari Nordmann" src={kari.avatarUrl} />

AvatarGroup

`limit` samler resten i en «+N» — rendret som en ekte Avatar med teksten som «navn».

<AvatarGroup limit={3}>
  {godkjennere.map(g => <Avatar key={g.id} name={g.navn} />)}
</AvatarGroup>

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

src

string

—

Bildeadresse. Uten den (eller ved lastefeil): initial-fallback.

name *

string

—

Fullt navn — kilden til initial-fallback og alt-tekst.

size

16 | 24 | 32 | 48 | 64

Diameter i piksler.

title

string

—

Tilgjengelig navn (native title). Default `name`.

className

string

—

Ekstra klasser.

AvatarGroup.children *

ReactElement<AvatarProps> | ReactElement<AvatarProps>[]

—

`<Avatar />`-elementer i rekkefølge.

AvatarGroup.limit

number

—

Maks synlige avatarer før resten samles i en «+N».

AvatarGroup.size

16 | 24 | 32 | 48 | 64

Størrelsen «+N»-avataren rendres i — bør matche barnas egen size.

Beslektede komponenter

icon-tile

badge

list-row