Import
import { Avatar } from '@contentful/f36-avatar';
import { Avatar } from '@contentful/f36-component';
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="large"
colorVariant="gray"
/>
<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"
colorVariant="green"
/>
<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"
colorVariant="yellow"
/>
<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"
colorVariant="orange"
/>
<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"
colorVariant="purple"
/>
<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"
colorVariant="pink"
/>
<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"
colorVariant="lavender"
/>
<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"
colorVariant="emerald"
/>
<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"
colorVariant="primary"
/>
</Stack>
);
}
Special style variant primary
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"
colorVariant="primary"
/>
</Stack>
);
}
Special style variant muted
This property modifies the opacity of the Avatar component to indicate activity state.
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"
colorVariant="muted"
/>
</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 | |
| colorVariant | "primary" "muted" "green" "orange" "yellow" "purple" "pink" "emerald" "lavender" "gray" | |
| icon | ReactElement<any, string | JSXElementConstructor<any>> | |
| initials | string | |
| isLoading | false true | |
| size | "small" "tiny" "medium" "large" | |
| src | string | |
| testId | string A [data-test-id] attribute used for testing purposes | |
| tooltipProps | CommonProps & WithEnhancedContent & Omit<TooltipInternalProps, "children"> A tooltipProps attribute used to conditionally render the tooltip around root element | |
| 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.