Multiple Users Stacked

Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.

Default

import React from 'react'

import { MultipleUsersStacked } from 'playbook-ui'

const MultipleUsersStackedDefault = (props) => {
  return (
    <div>
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
      ]}
      />
      <br />
      <br />
      <MultipleUsersStacked
          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',
        },
      ]}
      />
      <br />
      <br />
      <MultipleUsersStacked
          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',
        },
      ]}
      />
    </div>
  )
}

export default MultipleUsersStackedDefault

Bubble

import React from 'react'

import { MultipleUsersStacked } from 'playbook-ui'

const MultipleUsersStackedBubble = (props) => {
  return (
    <div>
      <MultipleUsersStacked
          users={[
        {
          name: 'Patrick Welch',
          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
        },
      ]}
          variant="bubble"
      />
      <br />
      <br />
      <MultipleUsersStacked
          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',
        },
      ]}
          variant="bubble"
      />
      <br />
      <br />
      <MultipleUsersStacked
          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',
        },
      ]}
          variant="bubble"
      />
      <br />
      <br />
      <MultipleUsersStacked
          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',
        },
      ]}
          variant="bubble"
      />
    </div>
  )
}

export default MultipleUsersStackedBubble

Sizes

import React from 'react'

import { Flex, Title, MultipleUsersStacked } from 'playbook-ui'

const MultipleUsersStackedSize = (props) => {
  const sizes = [
    { label: 'S', size: 'sm' },
    { label: 'M', size: 'md' },
    { label: 'L', size: 'lg' },
    { label: 'XL', size: 'xl' },
  ]

  const usersList = [
    [
      {
        name: 'Patrick Welch',
        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
      },
    ],
    [
      {
        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: '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: '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',
      },
    ],
  ]

  return (
    <>
      {sizes.map(({ label, size }) => (
        <Flex key={size}
            orientation="column"
        >
          <Title paddingTop='sm' >{label}</Title>
          <Flex>
            {usersList.map((users, index) => (
              <Flex key={index}
                  paddingRight='sm'
              >
                <MultipleUsersStacked
                    size={size}
                    users={users}
                    variant="bubble"
                />
              </Flex>
            ))}
          </Flex>
          <br />
        </Flex>
      ))}
    </>
  )
}

export default MultipleUsersStackedSize

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