An image element with a fallback for representing the user.
import React from 'react';
import { styled } from '@stitches/react';
import { violet, blackA } from '@radix-ui/colors';
import * as AvatarPrimitive from '@radix-ui/react-avatar';
const StyledAvatar = styled(AvatarPrimitive.Root, {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
verticalAlign: 'middle',
overflow: 'hidden',
userSelect: 'none',
width: 45,
height: 45,
borderRadius: '100%',
backgroundColor: blackA.blackA3,
});
const StyledImage = styled(AvatarPrimitive.Image, {
width: '100%',
height: '100%',
objectFit: 'cover',
borderRadius: 'inherit',
});
const StyledFallback = styled(AvatarPrimitive.Fallback, {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
color: violet.violet11,
fontSize: 15,
lineHeight: 1,
fontWeight: 500,
});
// Exports
export const Avatar = StyledAvatar;
export const AvatarImage = StyledImage;
export const AvatarFallback = StyledFallback;
// Your app...
const Flex = styled('div', { display: 'flex' });
const AvatarDemo = () => (
<Flex css={{ gap: 20 }}>
<Avatar>
<AvatarImage
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
alt="Colm Tuite"
/>
<AvatarFallback delayMs={600}>CT</AvatarFallback>
</Avatar>
<Avatar>
<AvatarImage
src="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
alt="Pedro Duarte"
/>
<AvatarFallback delayMs={600}>JD</AvatarFallback>
</Avatar>
<Avatar>
<AvatarFallback>PD</AvatarFallback>
</Avatar>
</Flex>
);
export default AvatarDemo;
Install the component from your command line.
npm install @radix-ui/react-avatar
Import all parts and piece them together.
import * as Avatar from '@radix-ui/react-avatar';
export default () => (
<Avatar.Root>
<Avatar.Image />
<Avatar.Fallback />
</Avatar.Root>
);
Contains all the parts of an avatar.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange
handler if you need more control.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
onLoadingStatusChange | function |
An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs
prop to delay its rendering so it only renders for those with slower connections. For more control, use the onLoadingStatusChange
handler on Avatar.Image
.
Prop | Type | Default |
---|---|---|
asChild | boolean | false |
delayMs | number |
You can compose the Avatar with a Tooltip to display extra information.
import * as Avatar from '@radix-ui/react-avatar';
import * as Tooltip from '@radix-ui/react-tooltip';
export default () => (
<Tooltip.Root>
<Tooltip.Trigger>
<Avatar.Root>…</Avatar.Root>
</Tooltip.Trigger>
<Tooltip.Content side="top">
Tooltip content
<Tooltip.Arrow />
</Tooltip.Content>
</Tooltip.Root>
);