Facepile

Displays a collection of user avatars in a compact format, commonly used to represent participants or contributors.

Default state

Display a collection of Avatar components in a flat list.

User avatar
A
B
C

Example: Facepile default

  import { Avatar, Facepile } from '@skiff-org/skiff-ui';
  <Facepile>
    <Avatar imgSrc={ProfilePic} />
    <Avatar label='Alice' />
    <Avatar label='Bob' />
    <Avatar label='Charlie' />
  </Facepile>

Stacked Facepile

Display a collection of Avatar components in a compact square.

User avatar
A
B
+1
User avatar
A
B
User avatar
A

Example: Stacked Facepile

  import { Avatar, Layout, Size } from '@skiff-org/skiff-ui';

  <Facepile layout={Layout.STACKED}>
    <Avatar imgSrc={ProfilePic} />
    <Avatar label='Alice' />
    <Avatar label='Bob' />
    <Avatar label='Charlie' />
  </Facepile>

Properties

  • Name
    children
    Type
    Array<Avatar>
    Description

    Avatar children elements

  • Name
    background
    Type
    string
    Description

    Set the background color behind the Avatar components.

  • Name
    forceTheme
    Type
    ThemeMode
    Description

    Force theme to light or dark mode.

  • Name
    layout
    Type
    Layout
    Description

    Sets whether Avatars are inline or in a stacked square.

  • Name
    maxDisplayed
    Type
    number
    Description

    Max number of visible Avatars in an inline layout

  • Name
    badgeSize
    Type
    number
    Description

    Override the default badge size.

  • Name
    size
    Type
    FacepileSize
    Description

    Facepile Avatar size

  • Name
    onMoreClick
    Type
    () => void
    Description

    Trigger action when you click on the overflow Avatar button.