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.

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 { Avatar } from "@cord-sdk/react";

export const Example = () => (
  <Avatar userId={'my-awesome-user-id'} />
);

CSS Variables