Avatar

When to use #

The Avatar component renders an avatar icon showing the profile picture of the user ID you have given as an input. If your user doesn't have a profile picture, it will render an icon with the first letter of the user's name capitalized, in a white font and black background. You can of course customize this by using our Replacements API and replacing AvatarFallback.

Adding avatars and profile pictures to your app helps build social context. It can make it clear who sent a message, who is present on a page, or give any other social cue, that makes your users feel connected.

You can even combine avatars to do something like creating your own facepile. Let's say some of your users have a profile picture, but others don't, and you don't want to use the avatar and facepile's default fallback. You could render a series of Avatar components for users who have a profile picture, and then your own fallback for ones that don't -- or even build your own wrapper around this component that would do that.

How to use #

import { betaV2 } from "@cord-sdk/react";
      
function ExampleAvatar({userID}) {
    const user = useUserData(userID);
    
    return <betaV2.Avatar
        user={user}
        enableTooltip
    />;
}

import { betaV2 } from "@cord-sdk/react";
      
function ExampleAvatar({userID}) {
    const user = useUserData(userID);
    
    return <betaV2.Avatar
        user={user}
        enableTooltip
    />;
}

Alternatively, you can use Avatar.ByID and we will fetch the user data for you.

import { betaV2 } from "@cord-sdk/react";
      
function ExampleAvatarByID({user}) {    
    return <betaV2.Avatar.ByID
        userID={user.id}
        enableTooltip
    />;
}

import { betaV2 } from "@cord-sdk/react";
      
function ExampleAvatarByID({user}) {    
    return <betaV2.Avatar.ByID
        userID={user.id}
        enableTooltip
    />;
}

View Source Code

Properties #

Customization with Replacements #

If you want to customize your component, you can customize the CSS (see below), but you can also switch parts of the component for your own ones with out Replacements API.

These are the components you can replace in the avatar. Some are better understood in context. We suggest inspecting the component with your browser's developer tools to find elements with a data-cord-replace attribute.

CSS customization #

If you want to customize this component, you can target the classes below in your app's CSS. These are guaranteed to be stable.

There are more classes that are best understood in context. We suggest inspecting the component with your browser's developer tools to view everything. You can target any classes starting with cord-.