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 Variables

Name Default Value
--cord-avatar-border-radius
var(--cord-space-3xs, 4px);
--cord-avatar-text-color
var(--cord-color-base, #FFFFFF);
--cord-avatar-background-color
var(--cord-color-brand-primary, #121314);
--cord-avatar-text-transform
none;