Avatar

A fully customizable icon component that represents your user

Live Demo

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'} />
);

Copy

Properties #

userId #

required

string

The user ID for the avatar you want to render.

Warning! If you provide an empty string or an ID that does not exist, the component will fail silently, rendering no avatar.

enableTooltip #

optional

boolean

When true, a tooltip with the user's name will appear on top of the Avatar. The default value is false

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.

Class nameDescription

.cord-avatar-container: Applied to the container div. This class is always present.
.cord-avatar-fallback: Applied to the container div which is shown only when a user doesn't have a profile picture.
.cord-avatar-image: Applied to the img tag.
.cord-not-present: Applied to avatars of users that are not marked as present.
.cord-present: Applied to avatars of users that are marked as present.
.cord-loading: Applied to avatars before profile pictures load.

Color palettes #

When users don't have a profile picture, we show a fallback. By default, this is their initial on black background. However, you can customize it! Each avatar fallback has a cord-color-palette-X class, where X is a number between 1 and 8. This number is unique per user ID. This means that the same user ID will always be assigned the same palette number. So, if the user with ID "Jack" has a cord-color-palette-2 in the Avatar, it will also have the same palette in PagePresence, and in every other Cord component.
Here's a CSS code snippet you could use to customize the avatar fallback using the color palette class:

.cord-avatar-fallback {
  color: black;
}
.cord-avatar-container:is(.cord-color-palette-1, .cord-color-palette-2) .cord-avatar-fallback {
  background-color: #7bdff2;
}
.cord-avatar-container:is(.cord-color-palette-3, .cord-color-palette-4) .cord-avatar-fallback {
  background-color: #b2f7ef;
}
.cord-avatar-container:is(.cord-color-palette-5, .cord-color-palette-6) .cord-avatar-fallback {
  background-color: #f7d6e0;
}
.cord-avatar-container:is(.cord-color-palette-7, .cord-color-palette-8) .cord-avatar-fallback {
  background-color: #f2b5d4;
}

Copy

Next up #

Ask Cordy