Cord LogoDocs
Sign inStart now

Facepile

Components /
Ask the Community

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 #

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

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

<cord-facepile
  users=(['userID_1', 'userID_2', 'userID_3'])
></cord-facepile>

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 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-facepile
Applied to the container div. This class is always present.

Not finding the answer you need? Ask our Developer Community

Ask Cordy