Avatar

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

render(<Preview />)

Use Avatar when

• representing a person or an entity

Avoid Avatar when

• representing anything other than a person or an entity, such as a document. Use icons or other visual symbols instead
• it is used purely for decoration without function or meaning

Examples

Sizes

In addition to sm, md and lg, Avatar also supports the xs size.

const Sizes = () => (
  <>
    <Avatar data-size='xs' aria-label='extra small' initials='xs' />
    <Avatar data-size='sm' aria-label='small' initials='sm' />
    <Avatar data-size='md' aria-label='medium' initials='md' />
    <Avatar data-size='lg' aria-label='large' initials='lg' />
  </>
);

render(<Sizes />)

Colours

Avatar is available in all colours in your theme.

const ColorVariants = () => {
  const colors = ['neutral', 'accent', 'brand1', 'brand2', 'brand3'];

  return (
    <>
      {colors.map((color) => (
        <Avatar
          key={color}
          data-color={color as AvatarProps['data-color']}
          aria-label={`color ${color}`}
        />
      ))}
    </>
  );
};

render(<ColorVariants />)

Variants

Avatar can be round or square. Use them consistently throughout your solution.

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

Guidelines

Avatar should help make the user interface more recognisable and easier to navigate without distracting or taking up unnecessary space.

• Use the same avatar shape consistently throughout the solution.
• The avatar should usually be combined with text, unless it is entirely clear who or what it represents.
• Only use an avatar when it actually adds value to the user experience, for example to show who authored something or who is responsible.

Text

Avatar should not contain text inside the component, except when using initials. Other text, such as full names, roles or organisations, should be placed outside the avatar to ensure good readability.