Rate this page:

AvatarStack

A component that represents multiple avatars (name and profile picture) for users, subject to their privacy settings.

Usage

1
import ForgeUI, { AvatarStack } from 'forge/ui';

Props

NameTypeRequiredDescription
childrenArray<Avatar>YesThe Atlassian account IDs for the users whose avatars are displayed in the AvatarStack. See Avatar for further details on the props.

Example

A simple stack of seven avatars using the Avatar component.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import ForgeUI, {render, AvatarStack, Avatar} from '@forge/ui';

const App = () => {
    return (
        <AvatarStack>
            <Avatar accountId="5a1234bc8d12345e3f1g11hi"/>
            <Avatar accountId="2a98a42dbc7ab42e12ee360d"/>
            <Avatar accountId="5d8732lq8jg85a0e3f1g90as"/>
            <Avatar accountId="2h98a10dbl5ab93e62hja23z"/>
            <Avatar accountId="7b20f0bc2d05325e3f1g43ty"/>
            <Avatar accountId="2p72s42dbc7ab42e90gf252d"/>
            <Avatar accountId="2l01x78mf4pqw42e84fg40ad"/>
        </AvatarStack>
    );
};

export const run = render (<App/>);

Preview

Avatar stack with seven Atlassian users

Rate this page: