Avatar - Components - Design System

#Overview

The user avatar includes the following features:

For employees of Digitec Galaxus, an additional company logo is displayed on the bottom right of the image (except for size "tiny").
While the image is loading, a skeleton placeholder is shown.
A fallback image is used for blocked, deleted, or inactive users.

For a more in-depth explanation about profile and author pictures, please refer to Images And Illustrations.

Name	Type	Default	Description
alt *	`string`	-	Alt text for the image
showPlaceholder *	`boolean`	-	Placeholder avatar image. A default fallback image for blocked and deleted users or users without an avatar.
size *	`"tiny"` \| `"small"` \| `"medium"` \| `"huge"` \| `"giant"` \| `"deprecatedSmall"` \| `"deprecatedBig"`	-	Size of the Avatar, check out the `AVATAR_SIZE_MAP` from `@segments/avatar` for available sizes and their dimensions
src *	`string`	-	Source of the image Whle `null` or `undefined` and while the image is loading, a skeleton is shown Is ignored, while `showPlaceholder` is `true`
backgroundColor	`string`	-	Background color for the default avatars if users don't provide an image, e.g. `#f87756`
showCompanyLogo	`boolean`	`false`	If true, the Avatar will have a company logo in the bottom right corner

import { Avatar } from "@segments/avatar";

const Example = () => (
  <Avatar
    src="./some/path/avatar.png"
    showFallbackImage={false}
    size="giant"
    alt="Avatar"
  />
);

#Employee Avatar

Show codeHide code

export const EmployeeAvatarDemo = () => {
  return (
    <Spacer>
      <Avatar
        src="/im/Files/2/0/7/9/4/9/9/2/suicide_squad_harely_quinn_format.jpg"
        alt="avatar"
        size={"giant"}
        showPlaceholder={false}
        showCompanyLogo
      />
      <Avatar
        src="/im/Files/2/0/7/9/4/9/9/2/suicide_squad_harely_quinn_format.jpg"
        alt="avatar"
        size={"huge"}
        showPlaceholder={false}
        showCompanyLogo
      />
      <Avatar
        src="/im/Files/2/0/7/9/4/9/9/2/suicide_squad_harely_quinn_format.jpg"
        alt="avatar"
        size={"medium"}
        showPlaceholder={false}
        showCompanyLogo
      />
      <Avatar
        src="/im/Files/2/0/7/9/4/9/9/2/suicide_squad_harely_quinn_format.jpg"
        alt="avatar"
        size={"small"}
        showPlaceholder={false}
        showCompanyLogo
      />
      <Avatar
        src="/im/Files/2/0/7/9/4/9/9/2/suicide_squad_harely_quinn_format.jpg"
        alt="avatar"
        size={"tiny"}
        showPlaceholder={false}
        showCompanyLogo
      />
    </Spacer>
  );
};

#Skeleton

Show codeHide code

export const SkeletonAvatarDemo = () => {
  return (
    <Spacer>
      <Avatar
        src={undefined}
        alt="avatar"
        size={"giant"}
        showPlaceholder={false}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"huge"}
        showPlaceholder={false}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"medium"}
        showPlaceholder={false}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"small"}
        showPlaceholder={false}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"tiny"}
        showPlaceholder={false}
      />
    </Spacer>
  );
};

#Default User Avatar

Show codeHide code

export const UserDefaultAvatarDemo = () => {
  return (
    <Spacer>
      <Avatar
        src="/im/Files/3/7/0/5/9/8/4/gax_avatar_4.png"
        alt="avatar"
        size={"giant"}
        showPlaceholder={false}
        backgroundColor="#80c9f1"
      />
      <Avatar
        src="/im/Files/3/7/0/5/9/8/4/gax_avatar_4.png"
        alt="avatar"
        size={"huge"}
        showPlaceholder={false}
        backgroundColor="#80c9f1"
      />
      <Avatar
        src="/im/Files/3/7/0/5/9/8/4/gax_avatar_4.png"
        alt="avatar"
        size={"medium"}
        showPlaceholder={false}
        backgroundColor="#80c9f1"
      />
      <Avatar
        src="/im/Files/3/7/0/5/9/8/4/gax_avatar_4.png"
        alt="avatar"
        size={"small"}
        showPlaceholder={false}
        backgroundColor="#80c9f1"
      />
      <Avatar
        src="/im/Files/3/7/0/5/9/8/4/gax_avatar_4.png"
        alt="avatar"
        size={"tiny"}
        showPlaceholder={false}
        backgroundColor="#80c9f1"
      />
    </Spacer>
  );
};

#Fallback Image

Show codeHide code

export const FallbackAvatarDemo = () => {
  return (
    <Spacer>
      <Avatar
        src={undefined}
        alt="avatar"
        size={"giant"}
        showPlaceholder={true}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"huge"}
        showPlaceholder={true}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"medium"}
        showPlaceholder={true}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"small"}
        showPlaceholder={true}
      />
      <Avatar
        src={undefined}
        alt="avatar"
        size={"tiny"}
        showPlaceholder={true}
      />
    </Spacer>
  );
};

#Overview

#Employee Avatar

#Skeleton

#Default User Avatar

#Fallback Image

#Colors

#Avatar Colors

#Brand Icon Colors

About us