An image element with a fallback for representing the user.
import React from 'react';
import * as Avatar from '@radix-ui/react-avatar';
import './styles.css';
const AvatarDemo = () => (
<div style={{ display: 'flex', gap: 20 }}>
<Avatar.Root className="AvatarRoot">
<Avatar.Image
className="AvatarImage"
src="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
alt="Colm Tuite"
/>
<Avatar.Fallback className="AvatarFallback" delayMs={600}>
CT
</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root className="AvatarRoot">
<Avatar.Image
className="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"
/>
<Avatar.Fallback className="AvatarFallback" delayMs={600}>
JD
</Avatar.Fallback>
</Avatar.Root>
<Avatar.Root className="AvatarRoot">
<Avatar.Fallback className="AvatarFallback">PD</Avatar.Fallback>
</Avatar.Root>
</div>
);
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>
);