A fully customizable icon component that represents your user
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.
import { Avatar } from "@cord-sdk/react";
export const Example = () => (
<Avatar userId={'my-awesome-user-id'} />
);
true
, a tooltip with the user's name will
appear on top of the Avatar. The default value is false
--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;