UserGroup

A stack of multiple users (name and profile picture), subject to their privacy settings.

The UserGroup component can also be used within a Text component, appearing as lozenges with the names of the users when used within this context.

Import statement

1
2
import ForgeUI, { UserGroup } from '@forge/ui';

Props

Name	Type	Required	Description
`children`	`Array<User>`	Yes	The users (specified by Atlassian account ID) whose avatars and/or names are displayed in the UserGroup. See User for further details on the props.

Example

A simple group of seven users using the UserGroup component.

1
2
import ForgeUI, { render, UserGroup, User } from '@forge/ui';

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

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