Multiple Users

The multiple users kit is used to show that more than one user is associated to an action or item.

See this kit in action in our sample UI

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

UI Samples using Multiple Users Kit

Get the full picture. See how this kit is used in our samples.

Trending Repositories

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat