<lm-avatar> – Avatar / Avatar

Om komponenten

Kanonisk navn: <lm-avatar>
Synonymer: avatar, profilbilde, user image, profile image, initialer
Kategori: medieinnhold
ARIA-mønster: Ikke aktuelt - Ren visningskomponent uten eget APG-widgetmønster. Tilgjengeligheten løses med native <img> og et tilgjengelig navn på vertselementet.
Parts: avatar, image, fallback
Native-first-vurdering: Et vanlig <img> dekker ikke avatar-mønsteret alene når UI-et også trenger automatisk fallback til initialer og konsistent form/størrelse. Komponenten bygger fortsatt på native bildeoppførsel internt og legger bare til fallback-logikken rundt den.
Nettleserstøtte: Ingen spesielle forbehold - kun bredt støttede, stabile plattform-API-er og native bildehendelser (load/error).
Design-tokens: var(--border-width, ...), var(--border-color, ...), var(--radius-medium, ...), var(--radius-large, ...), var(--color-surface-muted, ...), var(--color-surface-text, ...), var(--font-headline, ...), var(--letter-spacing-wide, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Viser et lite profil- eller enhetsbilde i en konsistent form, med automatisk fallback til initialer når bildet mangler eller ikke kan lastes. Komponenten dekker det vanlige designsystem-gapet mellom et rent <img>-tag og et faktisk avatar-mønster med stabil fallback-oppførsel.

Egner seg for

Lister, kort og kommentarer der en person, konto eller organisasjon trenger et lite, gjenkjennelig bilde.
Steder der bildekilden er usikker og UI-et må ha en stabil fallback uten ekstra sidekode.

Egner seg ikke for

Store hero-bilder eller innholdsbilder med egen bildetekst - bruk vanlig <img> eller <figure>.
Situasjoner der navnet aldri er kjent og et meningsfullt alternativt navn ikke kan gis - da er en dekorativ løsning eller ren plassholder ofte bedre.

Bruk

Gi alltid enten alt eller name når avataren formidler hvem elementet representerer. name brukes også til å lage initialer hvis bildet mangler.

<script type="module" src="/designsystem/komponenter/medieinnhold/avatar/avatar.js"></script>

<lm-avatar
    name="Ole Jørgen Bakken"
    alt="Ole Jørgen Bakken"
    size="large">
</lm-avatar>

<lm-avatar name="LMFAOLE" shape="square"></lm-avatar>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Beskrivelse
`name`	`string`	Attributt/property. Navnet brukt til å generere initialer når bildet mangler eller ikke kan lastes. Brukes også som tilgjengelig navn hvis `alt` ikke er satt.
`src`	`string`	Attributt/property. Bildeadressen som vises når den kan lastes.
`alt`	`string`	Attributt/property. Tilgjengelig navn for avataren. Tom streng (`alt=""`) gjør komponenten dekorativ.
`size`	`"small" \| "large"`	Attributt. Visuell størrelsesvariant. Uten attributt brukes standardstørrelsen.
`shape`	`"square" \| "rounded"`	Attributt. Lar avataren bruke avrundet rektangel eller kvadrat i stedet for standard sirkelform.

Parts

Part	Beskrivelse
`avatar`	Den omsluttende flaten som holder bildet eller fallback-innholdet.
`image`	Det interne `<img>`-elementet når et gyldig bilde vises.
`fallback`	Initialene eller spørsmålstegnet som vises når bildet mangler eller feiler.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-avatar::part(avatar) {
    /* egne stiler for "Den omsluttende flaten som holder bildet eller fallback-innholdet." */
}

lm-avatar::part(image) {
    /* egne stiler for "Det interne `<img>`-elementet når et gyldig bilde vises." */
}

lm-avatar::part(fallback) {
    /* egne stiler for "Initialene eller spørsmålstegnet som vises når bildet mangler eller feiler." */
}

Tilgjengelighet

Når komponenten er informativ, får vertselementet role="img" og et tilgjengelig navn fra alt eller name. Tom alt gjør avataren dekorativ. Selve fallback-teksten er markert som dekorativ fordi navnet allerede annonseres via vertselementet.

Vertselementet får role="img" og et tilgjengelig navn fra alt eller name, slik at skjermleseren ikke blir avhengig av de synlige initialene alene.
Tom alt (alt="") gjør komponenten dekorativ og fjerner det tilgjengelige navnet.
Fallback-initialene er aria-hidden, fordi de bare er en visuell reserve for et allerede navngitt bilde.

Detaljer

Hvis src mangler eller feiler, viser komponenten de to første initialene fra name, eller ? hvis navn ikke finnes.
shape lar samme komponent brukes både som klassisk rund avatar og som mer app-lignende, avrundet enhetsbrikke.

Referanser

Se også:

../preview-image/index.html - brukes når selve innholdet er et bilde med metadata, ikke bare en liten representasjon av en person eller enhet.
../../innhold/card/index.html - er en naturlig vertskomponent for avataren i lister og profilerte kort.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: Ingen