Avatar

Unable to parse html

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

render(<Preview />)

Usage

Avatar uses the class name ds-avatar on a <span> with role="img".Ensure the avatar has an accessible name.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

Example

Variants

Use data-variant to determine the shape of the avatar. You can choose between circle (default) or 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 />)

With image or icon

Avatar displays a user icon by default, but this can be overridden in CSS using the --dsc-avatar-icon-url variable.

If you add an image or icon as content inside the avatar, make sure to set aria-hidden="true" to avoid duplicate information. You must add an aria-label to the avatar yourself to explain who or what the avatar represents.

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

Composition

The component should be able to be composed into other components. Here is an example of using avatar inside a dropdown component.

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 />)

Non-text content

If you add anything other than text as a child inside <Avatar> (like an image or icon), it will automatically receive aria-hidden="true" to avoid duplicate information.