Avatar.mdx

import { Meta, Canvas, Controls, Primary } from '@storybook/blocks';

import * as AvatarStories from './Avatar.stories';

Avatar

Avatar er en komponent som viser et bilde, initialer eller ikon for en bruker eller profil.

Bruk

import { Avatar } from '@digdir/designsystemet-react';

/* Med standard brukerikon */
<Avatar aria-label="Ola Nordmann" />

/* Med initialer */
<Avatar aria-label="Ola Nordmann">ON</Avatar>

/* Med bilde */
<Avatar aria-label="Ola Nordmann">
  <img src="..." />
</Avatar>

Standard ikon

Sender du ikke inn children viser vi et standard brukerikon.

Størrelser

Avatar kommer i flere størrelser. Tekst og ikon vil skalere, men det kan hende ikonet ditt må tilpasses.

Fargevarianter

Du kan bruke alle tema fargene dine på Avatar.

Varianter

Du kan endre mellom sirkel og firkantet form. Standard er sirkel.

Med bilde

Skal du ha bilde, legger du dette som direkte barn av Avatar.

Bilde (og andre child elements) får automatisk aria-hidden="true" for å unngå dobbel informasjon.

Komponering

Du kan komponere Avatar inn i andre komponenter, som DropdownMenu, samt bruke komponenter som Badge rundt for å vise status.

Som lenke

Legg lenker eller knapper rundt Avatar for å gjøre det klikkbart. Du må selv sette styling dersom du skal ha en interaktiv Avatar.