Avatar

Unable to parse html

const Preview = () => (
  <Avatar aria-label='Ola Nordmann' variant='circle' />
);

render(<Preview />)

Bruk

Avatar bruker klassenavnet ds-avatar på en <span> med role="img". Sørg for at avatar har tilgjengelig navn.

CSS variabler og data-attributter

Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.

Eksempel

Varianter

Bruk data-variant til å bestemme formen på avatar. Du kan velge mellom circle (standard) eller square .

Unable to parse html

const ShapeVariants = () => (
  <>
    <Avatar variant='circle' aria-label='variant circle' />
    <Avatar variant='square' aria-label='variant square' />
    <Avatar variant='circle' aria-label='Ola Nordmann'>
      ON
    </Avatar>
    <Avatar variant='square' aria-label='Ola Nordmann'>
      ON
    </Avatar>
  </>
);

render(<ShapeVariants />)

Med bilde eller ikon

Avatar viser som standard et brukerikon, men dette kan overstyres i CSS med variabelen --dsc-avatar-icon-url.

Dersom du legger bilder eller ikon som barn må du sørge for å sette aria-hidden="true" for å unngå dobbel informasjon. Du må selv sette aria-label på avatar for å forklare hvem eller hva avataren representerer.

Unable to parse html

const WithImageAndIcon = () => (
  <>
    <Avatar aria-label='Ola Nordmann'>
      <img src='/img/component-docs/cats/cat1.webp' alt='' />
    </Avatar>
    <Avatar aria-label='Ola Nordmann'>
      <BriefcaseIcon />
    </Avatar>
  </>
);

render(<WithImageAndIcon />)

React

Komponering

Komponenten skal kunne komponeres inn i andre komponenter. Her er et eksempel på bruk av avatar inne i en Dropdown-komponent.

Unable to parse html

const InDropdown = () => (
  <>
    <Button popovertarget='dropdown' variant='tertiary'>
      <Avatar aria-hidden='true' data-size='sm'>
        ON
      </Avatar>
      Ola Nordmann
    </Button>
    <Dropdown id='dropdown' placement='bottom-end' autoPlacement={false}>
      <Dropdown.List>
        <Dropdown.Item>
          <Dropdown.Button>
            <Badge.Position overlap='circle'>
              <Badge data-color='danger' data-size='sm'></Badge>
              <Avatar aria-hidden='true' data-size='xs'>
                ON
              </Avatar>
            </Badge.Position>
            Ola Nordmann
          </Dropdown.Button>
        </Dropdown.Item>
        <Dropdown.Item>
          <Dropdown.Button>
            <Avatar aria-hidden='true' data-size='xs'>
              <BriefcaseIcon />
            </Avatar>
            Sogndal kommune
          </Dropdown.Button>
        </Dropdown.Item>
      </Dropdown.List>
    </Dropdown>
  </>
);

render(<InDropdown />)

Ikke tekstlig innhold

Dersom du legger inn noe annet enn tekst som barn i <Avatar> (som for eksempel et bilde eller ikon), vil disse få aria-hidden="true" automatisk for å unngå dobbel informasjon.