Facepile

Add user avatar icons to your page for a list of user IDs - pair this component with our APIs to add real-time social cues to your app


Live Demo

When to use

The <Facepile /> component renders a "facepile" showing the avatar icons of the user IDs you have given as an input. For example, you can use our thread API to fetch the user IDs of the participants of a thread. You can then pass this array to the Facepile component.

This component pairs well with:


How to use

import { Facepile } from "@cord-sdk/react";

export const Example = () => (
  <Facepile
    users={['userID_1', 'userID_2', 'userID_3']}
  />
);
Copy

Properties


users

required
array
An array of user IDs, in the form of strings, for the avatar icons to be rendered.
Warning! If you provide an empty string or an ID that does not exist, the component will fail silently, rendering no avatar for that particular user.

enableTooltip

optional
boolean
When true, a tooltip with the user's displayName will appear on top of each Avatar. The default value is true

CSS Variables

Name Default Value
--cord-facepile-background-color
var(--cord-color-base, #FFFFFF);
--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;
--cord-tooltip-background-color
var(--cord-color-brand-primary, #121314);
--cord-tooltip-content-color
var(--cord-color-base, #FFFFFF);