Avatar

Import

import { Avatar, Size, Variant } from '@contentful/f36-avatar';

Examples

Variants

The Avatar can be rendered in different variants:

• User - default variant
• App - default variant

Hide code
function AvatarVariantsExample() {
  return (
    <Stack>
      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        variant={Variant.User}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        variant={Variant.App}
      />
    </Stack>
  );
}
function AvatarVariantsExample() {
  return (
    <Stack>
      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        variant={Variant.User}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        variant={Variant.App}
      />
    </Stack>
  );
}
Open in Playground

Sizes

The Avatar can be rendered in different sizes:

• Tiny - 20px
• Small - 24px
• Medium - 32px, default size
• Large - 48px

Hide code
function AvatarVariantsExample() {
  return (
    <Stack>
      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Tiny}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Small}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Medium}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Large}
      />
    </Stack>
  );
}
function AvatarVariantsExample() {
  return (
    <Stack>
      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Tiny}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Small}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Medium}
      />

      <Avatar
        src="https://images.ctfassets.net/iq4lnigp6fgt/2EEEk92Kiz6KxREsjBLPAN/810d5a21650d91abad12e95da4cd3beb/2021-06_Everyone_is_Welcome_here_1_.png?fit=fill&f=top_left&w=100&h=100"
        size={Size.Large}
      />
    </Stack>
  );
}
Open in Playground

Fallback

In some cases a user or an app will have no avatar to display. Instead, a fallback can be rendered when the src property is undefined (or an empty string "") and the loading state is not true.

Hide code
function AvatarFallbackExample() {
  return <Avatar />;
}
function AvatarFallbackExample() {
  return <Avatar />;
}
Open in Playground

Loading skeleton

When the avatar image is loading, a loading skeleton will be shown automatically. You can also force the loading state with the isLoading prop.

Hide code
function AvatarLoadingExample() {
  return <Avatar isLoading />;
}
function AvatarLoadingExample() {
  return <Avatar isLoading />;
}
Open in Playground

Accessibility

Make sure to pass a fitting alt property, especially if the avatar is used by itself without the user's name next to it.