Radix homepageRadix Homepage
PrimitivesAlpha

Avatar

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;

Features

  • Automatic and manual control over when the image renders.
  • Fallback part accepts any children.
  • Optionally delay fallback rendering to avoid content flashing.

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.

PropTypeDefault
asenumspan

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.

PropTypeDefault
asenumimg
onLoadingStatusChangefunctionNo default value

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.

PropTypeDefault
asenumspan
delayMsnumberNo default value

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>
);