Facepile

Components /

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);

Want to customize the components further?

Head to the full list of CSS Variables

Cord LogoDocs
Go to the Cord Console