Import
import { Avatar, Size, Variant } from '@contentful/f36-avatar';
Examples
Variants
The Avatar can be rendered in different variants:
- User - default variant
- App
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="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="app"
/>
</Stack>
);
}
Sizes
The Avatar can be rendered in different sizes:
- Tiny - 20px
- Small - 24px
- Medium - 32px, default size
- Large - 48px
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="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="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="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="large"
/>
</Stack>
);
}
Show Color Border
The Avatar can be rendered with outline colors, the color is determined by the position of the Avatar. There are 6 different colors: green, red, yellow, orange, purple and gray
function AvatarColorBordersExample() {
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="medium"
showColorBorder
/>
<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="medium"
showColorBorder
/>
<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="medium"
showColorBorder
/>
<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="medium"
showColorBorder
/>
<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="medium"
showColorBorder
/>
<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="medium"
showColorBorder
/>
</Stack>
);
}
IsPrimary
The Avatar can be rendered with a special color border reserved for the current user
function AvatarPrimaryExample() {
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="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="medium"
isPrimary
/>
</Stack>
);
}
IsActive
This property modifies the opacity of the Avatar component when it is not active
function AvatarActiveExample() {
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="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="medium"
isActive={false}
/>
</Stack>
);
}
Icons
An Avatar can display an icon on top of the image
function AvatarIconExamples() {
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="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="medium"
icon={<CheckCircleIcon variant="positive" />}
/>
</Stack>
);
}
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
.
function AvatarFallbackExample() {
return <Avatar />;
}
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.
function AvatarLoadingExample() {
return <Avatar isLoading />;
}
Name | Type | Default |
---|
alt | string | |
className | string CSS class to be appended to the root element | |
icon | ReactElement<any, string | JSXElementConstructor<any>> | |
isActive | false true | |
isLoading | false true | |
isPrimary | false true | |
showColorBorder | false true | |
size | "small" "tiny" "medium" "large" | |
src | string | |
testId | string A [data-test-id] attribute used for testing purposes | |
variant | "app" "user" | |
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.
title: 'AvatarGroup'
type: 'component'
status: 'alpha'
slug: /components/avatargroup/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/avatar'
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-avatar-avatargroup--overview'
typescript: ./src/AvatarGroup.tsx
Avatars can be displayed as group. The maximum visible Avatars in a group will be 3. If there are more than 3 Avatars in the group, the rest of the Avatars will be shown inside a Menu with their Avatar image and name (the alt text).
Variants
The group can be rendered in two variations
- spaced - default variant
- stacked
function AvatarVariantsExample() {
return (
<div>
<SectionHeading as="h3" marginBottom="spacingS">
Avatar Group spaced with menu
</SectionHeading>
<AvatarGroup>
<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"
alt="Alex Taylor-Allister"
/>
<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"
alt="Casey Lee"
/>
<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"
alt="Tyler Brunnenberger"
/>
<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"
alt="Yasemin Ahmed"
/>
</AvatarGroup>
<SectionHeading as="h3" marginBottom="spacingS">
Avatar Group stacked with menu
</SectionHeading>
<AvatarGroup variant="stacked">
<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"
alt="Alex Taylor-Allister"
/>
<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"
alt="Casey Lee"
/>
<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"
alt="Tyler Brunnenberger"
/>
<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"
alt="Yasemin Ahmed"
/>
</AvatarGroup>
</div>
);
}
Sizes
The group can be rendered in two different sizes
- Small - 24px
- Medium - 32px, default size
function AvatarVariantsExample() {
return (
<div>
<SectionHeading as="h3" marginBottom="spacingS">
Avatar Group in medium size
</SectionHeading>
<AvatarGroup>
<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"
alt="Alex Taylor-Allister"
/>
<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"
alt="Yasemin Ahmed"
/>
</AvatarGroup>
<SectionHeading as="h3" marginBottom="spacingS">
Avatar Group in small size
</SectionHeading>
<AvatarGroup 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"
alt="Alex Taylor-Allister"
/>
<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"
alt="Casey Lee"
/>
<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"
alt="Yasemin Ahmed"
/>
</AvatarGroup>
</div>
);
}