Playbook Design System

Avatar

Default

Code Example

Close

import React from 'react'
import { Avatar } from '../../'

const AvatarDefault = (props) => {
  return (
    <div>
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="xs"
          status="online"
          {...props}
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="online"
          {...props}
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="md"
          status="away"
          {...props}
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="lg"
          status="offline"
          {...props}
      />
      <br />
      <Avatar
          imageAlt="Terry Johnson Standing"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="xl"
          status="offline"
          {...props}
      />
    </div>
  )
}

export default AvatarDefault

Monogram

This is used when there is no avatar for a particular user.

Code Example

Close

import React from 'react'
import { Avatar } from '../../'

const AvatarDefault = (props) => {
  return (
    <div>
      <Avatar
          name="Terry Johnson"
          size="xs"
          {...props}
      />
      <Avatar
          name="Terry Johnson"
          size="sm"
          {...props}
      />
      <Avatar
          name="Terry Johnson"
          size="md"
          {...props}
      />
      <Avatar
          name="Terry Johnson"
          size="lg"
          {...props}
      />
      <Avatar
          name="Terry Johnson"
          size="xl"
          {...props}
      />
    </div>
  )
}

export default AvatarDefault

Bad Image Link

A monagram is used as a fallback when an invalid or missing image url is provided.

Code Example

Close

import React from 'react'
import { Avatar } from '../../'

const AvatarNoImage = (props) => {
  return (
    <div>
      <Avatar
          imageUrl="Just some text here"
          name="Terry Johnson"
          size="xs"
          {...props}
      />
      <Avatar
          imageUrl={4}
          name="Terry Johnson"
          size="sm"
          {...props}
      />
      <Avatar
          imageUrl="https://google.com"
          name="Terry Johnson"
          size="md"
          {...props}
      />
      <Avatar
          imageUrl=""
          name="Terry Johnson"
          size="lg"
          {...props}
      />
      <Avatar
          imageUrl="https://randomuser.me/api/portraits/men/notapicture.jpg"
          name="Terry Johnson"
          size="xl"
          {...props}
      />
    </div>
  )
}

export default AvatarNoImage

Status

The Status prop is used to display a user's online status like popular chat apps.

Code Example

Close

import React from 'react'
import { Avatar } from '../../'

const AvatarStatus = (props) => {
  return (
    <>
      <Avatar
          imageAlt="Terry Johnson Status"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          {...props}
      />

      <br />

      <Avatar
          imageAlt="Terry Johnson Online"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="online"
          {...props}
      />

      <br />

      <Avatar
          imageAlt="Terry Johnson Away"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="away"
          {...props}
      />

      <br />

      <Avatar
          imageAlt="Terry Johnson Offline"
          imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
          name="Terry Johnson"
          size="sm"
          status="offline"
          {...props}
      />

      <br />
    </>
  )
}

export default AvatarStatus

Avatar Action Button

Default

Code Example

Close

import React from 'react'
import { AvatarActionButton } from '../../'

const AvatarActionButtonDefault = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        {...props}
    />
  </div>
)

export default AvatarActionButtonDefault

Placement

Code Example

Close

import React from 'react'
import { AvatarActionButton } from '../../'

const AvatarActionButtonPlacement = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="bottom_left"
        {...props}
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="bottom_right"
        {...props}
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="top_left"
        {...props}
    />
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Sophia Carden"
        name="Sophia Carden"
        placement="top_right"
        {...props}
    />
  </div>
)

export default AvatarActionButtonPlacement

Actions

Code Example

Close

import React from 'react'
import { AvatarActionButton } from '../../'

const AvatarActionButtonActions = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        action="add"
        imageAlt="Add Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Add Sophia Carden"
        name="Sophia Carden"
        {...props}
    />
    <AvatarActionButton
        action="remove"
        imageAlt="Remove Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Remove Sophia Carden"
        name="Sophia Carden"
        {...props}
    />
  </div>
)

export default AvatarActionButtonActions

On Click

Code Example

Close

import React from 'react'
import { AvatarActionButton } from '../../'

const AvatarActionButtonOnClick = (props) => (
  <div className="pb--doc-demo-row">
    <AvatarActionButton
        imageAlt="Sophia Carden"
        imageUrl="https://randomuser.me/api/portraits/women/8.jpg"
        linkAriaLabel="Alert Sophia Carden"
        linkUrl="https://www.google.com"
        name="Sophia Carden"
        onClick={() => alert('clicked!')}
        {...props}
    />
  </div>
)

export default AvatarActionButtonOnClick

Multiple Users

Default

Code Example

Close

import React from 'react'
import { MultipleUsers } from '../../'

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',
        },
      ]}
          {...props}
      />

      <br />
      <br />

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

export default MultipleUsersDefault

Reverse

Code Example

Close

import React from 'react'
import { MultipleUsers } from '../../'

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',
          },
        ]}
          {...props}
      />

      <br />
      <br />

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

export default MultipleUsersReverse

Multiple Users Stacked

Default

Code Example

Close

import React from 'react'
import { MultipleUsersStacked } from '../../'

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

export default MultipleUsersStackedDefault

User

Default

Code Example

Close

import React from 'react'
import { User } from '../../'

const UserDefault = (props) => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="vertical"
            size="lg"
            title="Remodeling Consultant"
            {...props}
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            title="Remodeling Consultant"
            {...props}
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            {...props}
        />

        <br />

        <User
            align="left"
            avatar
            name="Anna Black"
            orientation="horizontal"
            {...props}
        />
      </div>

    </div>
  )
}

export default UserDefault

With Territory

Code Example

Close

import React from 'react'
import { User } from '../../'

const UserWithTerritory = (props) => {
  return (
    <div className="pb--doc-demo-row">

      <div>
        <User
            align="center"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="vertical"
            size="lg"
            territory="PHL"
            title="Remodeling Consultant"
            {...props}
        />
      </div>

      <div>
        <User
            align="left"
            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
            name="Anna Black"
            orientation="horizontal"
            territory="PHL"
            title="Remodeling Consultant"
            {...props}
        />
      </div>

      <div>
        <User
            align="center"
            name="Anna Black"
            orientation="horizontal"
            size="sm"
            territory="PHL"
            title="Remodeling Consultant"
            {...props}
        />

        <br />

        <User
            align="left"
            name="Anna Black"
            orientation="horizontal"
            size="lg"
            territory="PHL"
            title="Remodeling Consultant"
            {...props}
        />
      </div>

    </div>
  )
}

export default UserWithTerritory

Text Only

Code Example

Close

import React from 'react'
import { User } from '../../'

const UserTextOnly = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <User
          align="center"
          name="Anna Black"
          orientation="horizontal"
          size="lg"
          title="Remodeling Consultant"
          {...props}
      />
      <User
          align="left"
          name="Anna Black"
          orientation="horizontal"
          title="Remodeling Consultant"
          {...props}
      />
    </div>
  )
}

export default UserTextOnly

Horizontal Size

Code Example

Close

import React from 'react'
import { User } from '../../'

const UserDefault = (props) => {
  return (
    <div className="pb--doc-demo-row">
      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="sm"
          title="Remodeling Consultant"
          {...props}
      />

      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="md"
          title="Remodeling Consultant"
          {...props}
      />

      <User
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          size="lg"
          title="Remodeling Consultant"
          {...props}
      />
    </div>
  )
}

export default UserDefault

Vertical Size

Code Example

Close

import React from 'react'
import { User } from '../../'

const UserVerticalSize = (props) => {
  return (
    <div>
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="sm"
          title="Remodeling Consultant"
          {...props}
      />
      <br />
      <br />
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="md"
          title="Remodeling Consultant"
          {...props}
      />
      <br />
      <br />
      <User
          align="center"
          avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
          name="Anna Black"
          orientation="vertical"
          size="lg"
          title="Remodeling Consultant"
          {...props}
      />
    </div>
  )
}

export default UserVerticalSize

Avatars

Avatar

Avatar Action Button

Multiple Users

Multiple Users Stacked

User