Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationCase studiesBlog
Components

Avatar

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;

Features

    Automatic and manual control over when the image renders.

    Fallback part accepts any children.

    Optionally delay fallback rendering to avoid content flashing.

Installation

Install the component from your command line.

npm install @radix-ui/react-avatar

Anatomy

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>

);

API Reference

Root

Contains all the parts of an avatar.

PropTypeDefault
asChild
boolean
false

Image

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
asChild
boolean
false
onLoadingStatusChange
function
No default value

Fallback

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
asChild
boolean
false
delayMs
number
No default value

Examples

Clickable Avatar with tooltip

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>

);
PreviousAspect Ratio
NextCheckbox
Edit this page on GitHub.