Playbook Design System

Default

import React from 'react'

import { MultipleUsers } from 'playbook-ui'

const MultipleUsersDefault = (props) => {
  return (
    <div>
      <MultipleUsers
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />

      <br />
      <br />

      <MultipleUsers
          users={[
        {
          name: 'Shawn Palmer',
          imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
        },
        {
          name: 'Andrew Murray Cooper Craig',
        },
      ]}
      />
    </div>
  )
}

export default MultipleUsersDefault

Reverse

import React from 'react'

import { MultipleUsers } from 'playbook-ui'

const MultipleUsersReverse = (props) => {
  return (
    <div>
      <MultipleUsers
          reverse
          users={[
          {
            name: 'Patrick Welch',
            imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
          },
          {
            name: 'Lucille Sanchez',
            imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
          },
          {
            name: 'Beverly Reyes',
            imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
          },
          {
            name: 'Keith Craig',
            imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
          },
          {
            name: 'Alicia Cooper',
            imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
          },
        ]}
      />

      <br />
      <br />

      <MultipleUsers
          reverse
          users={[
          {
            name: 'Shawn Palmer',
            imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
          },
          {
            name: 'Andrew Murray',
          },
        ]}
      />
    </div>
  )
}

export default MultipleUsersReverse

Size

User avatar default size is xs or 28px, but you can pass in xxs to change avatar size to 20px.

import React from 'react'

import { Body, MultipleUsers } from 'playbook-ui'

const MultipleUsersSize = (props) => {
  return (
    <div>
      <Body
          color="light"
          text="xs"
      />
      <MultipleUsers
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
        {
          name: 'Lucille Sanchez',
          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
        },
        {
          name: 'Beverly Reyes',
          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
        },
        {
          name: 'Keith Craig',
          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
        },
        {
          name: 'Alicia Cooper',
          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
        },
      ]}
      />

      <br />

      <MultipleUsers
          marginTop="xs"
          size="xs"
          users={[
            {
              name: 'Shawn Palmer',
              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
            },
            {
              name: 'Andrew Murray Cooper Craig',
              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
            },
          ]}
      />

      <Body
          color="light"
          marginTop="xs"
          text="xxs"
      />
      <MultipleUsers
          size="xxs"
          users={[
            {
              name: 'Patrick Welch',
              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
            },
            {
              name: 'Lucille Sanchez',
              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
            },
            {
              name: 'Beverly Reyes',
              imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
            },
            {
              name: 'Keith Craig',
              imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
            },
            {
              name: 'Alicia Cooper',
              imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
            },
          ]}
      />

      <br />

      <MultipleUsers
          marginTop="xs"
          size="xxs"
          users={[
            {
              name: 'Shawn Palmer',
              imageUrl: 'https://randomuser.me/api/portraits/men/93.jpg',
            },
            {
              name: 'Andrew Murray Cooper Craig',
              imageUrl: 'https://randomuser.me/api/portraits/men/75.jpg',
            },
          ]}
      />
    </div>
  )
}

export default MultipleUsersSize

With Tooltip

Use the withTooltip / with_tooltip boolean prop to enable setting user-specific tooltip content via the tooltip property in the users array.

import React from 'react'

import { MultipleUsers } from 'playbook-ui'

const MultipleUsersWithTooltip = (props) => {
    return (
        <div>
            <MultipleUsers
                users={[
                    {
                        name: 'Patrick Welch',
                        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
                        tooltip: "Patrick Welch - Online"
                    },
                    {
                        name: 'Lucille Sanchez',
                        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
                        tooltip: "Lucille Sanchez - Offline"
                    },
                    {
                        name: 'Beverly Reyes',
                        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
                        tooltip: "Beverly Reyes - Online"
                    },
                    {
                        name: 'Keith Craig',
                        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
                        tooltip: "Keith Craig - Away"
                    },
                    {
                        name: 'Alicia Cooper',
                        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
                        tooltip: "Alicia Cooper - Busy"
                    },
                ]}
                withTooltip
            />
        </div>
    )
}

export default MultipleUsersWithTooltip

Max Displayed Users

import React from 'react'

import { Body, MultipleUsers } from 'playbook-ui'

const MultipleUsersMaxDisplayedUsers = (props) => {
    const status = () => (Math.random() < 0.5 ? 'Online' : 'Offline')
    const buildUser = (name, imageUrl) => ({ name, imageUrl, tooltip: `${name} - ${status()}` })

    const users = [
        buildUser("Patrick Welch", "https://randomuser.me/api/portraits/men/9.jpg"),
        buildUser("Lucille Sanchez", "https://randomuser.me/api/portraits/women/6.jpg"),
        buildUser("Beverly Reyes", "https://randomuser.me/api/portraits/women/74.jpg"),
        buildUser("Keith Craig", "https://randomuser.me/api/portraits/men/87.jpg"),
        buildUser("Alicia Cooper", "https://randomuser.me/api/portraits/women/20.jpg"),
        buildUser("Michelle Ellis", "https://randomuser.me/api/portraits/women/92.jpg"),
        buildUser("Clyde Mitchelle", "https://randomuser.me/api/portraits/men/39.jpg"),
        buildUser("Ellen Johnson", "https://randomuser.me/api/portraits/women/59.jpg"),
        buildUser("Eleanor Larson", "https://randomuser.me/api/portraits/women/46.jpg"),
        buildUser("Cody Cunningham", "https://randomuser.me/api/portraits/men/40.jpg"),
        buildUser("Thomas Parker", "https://randomuser.me/api/portraits/men/0.jpg"),
        buildUser("Frances Baker", "https://randomuser.me/api/portraits/men/46.jpg"),
        buildUser("Joseph Nguyen", "https://randomuser.me/api/portraits/women/42.jpg"),
    ]
    return (
        <div>
            <Body
                marginBottom={"md"}
                text={`Total Users: ${users.length}`}
            />
            <MultipleUsers
                maxDisplayedUsers={3}
                users={users}
            />
            <br />
            <br />
            <MultipleUsers
                maxDisplayedUsers={6}
                users={users}
                withTooltip
            />
            <br />
            <br />
            <MultipleUsers
                maxDisplayedUsers={9}
                reverse
                users={users}
            />
            <br />
            <br />
            <MultipleUsers
                maxDisplayedUsers={users.length - 1}
                users={users}
                withTooltip
            />
            <br />
            <br />
            <MultipleUsers
                maxDisplayedUsers={users.length + 1}
                users={users}
            />
        </div>
    )
}

export default MultipleUsersMaxDisplayedUsers

Multiple Users

Available Props

Contribute to Playbook

Power

Connect