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={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>
);
}
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={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>
);
}
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 | |
isLoading | false true | |
size | "20px" "24px" "32px" "48px" | |
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>
);
}