Avatar

Avatars are used to indentify a user

ImageAvatars

Loading SpinLoading SpinLoading SpinBroken Image
<SpacedGroup xs={2}>
    <Avatar
      size={36}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
    />
    <Avatar
      size={36}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      shouldSimulateError={true}
    />
    <Avatar
      size={36}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      shouldSimulateSlowLoad={true}
    />
    <Avatar size={36} />
  
</Playground>

LetterAvatar

WKS
<SpacedGroup xs={8}>
    <Avatar size={36} title="Walker" />
    <Avatar size={36} title="Kristen" />
    <Avatar size={36} title="Susan" />
  
</Playground>

Tooltips

Loading Spin
S
<SpacedGroup xs={8}>
    <Avatar
      size={36}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      title="Walker"
      showTooltip
    />
    <Avatar size={36} title="Sam" showTooltip />
  
</Playground>

Selection

These Avatars will get focus and are tabble!Loading SpinS
<SpacedGroup xs={8}>
    <span>These Avatars will get focus and are tabble!
    <Avatar
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      onClick={() => console.log('handle avatar selection')}
    />
    <Avatar
      onClick={() => console.log('handle letter avatar selection')}
      title="S"
    />
    <Avatar title="S" />
  </SpacedGroup>
</Playground>

Status

Loading SpinOnline
Loading SpinOffline
Loading SpinBusy
Loading SpinFocus
Loading SpinLoading Spin
<SpacedGroup xs={8}>
    <SpacedGroup direction="vertical" xs={4} center>
      <Avatar
        size={42}
        src={
          'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
        }
        onClick={() => console.log('handle avatar selection')}
        status="online"
      />
      <span>Online
    </SpacedGroup>
    <SpacedGroup direction="vertical" xs={4} center>
      <Avatar
        size={42}
        src={
          'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
        }
        onClick={() => console.log('handle avatar selection')}
        status="offline"
      />
      <span>Offline</span>
    </SpacedGroup>
    <SpacedGroup direction="vertical" xs={4} center>
      <Avatar
        size={42}
        src={
          'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
        }
        onClick={() => console.log('handle avatar selection')}
        status="busy"
      />
      <span>Busy</span>
    </SpacedGroup>
    <SpacedGroup direction="vertical" xs={4} center>
      <Avatar
        size={42}
        src={
          'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
        }
        onClick={() => console.log('handle avatar selection')}
        status="focus"
      />
      <span>Focus</span>
    </SpacedGroup>
    <Avatar
      size={36}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      onClick={() => console.log('handle avatar selection')}
      status="online"
    />
    <Avatar
      size={28}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      onClick={() => console.log('handle avatar selection')}
      status="online"
    />
  </SpacedGroup>
</Playground>

Count

Loading Spin1Loading Spin3Loading Spin10
<SpacedGroup xs={8}>
    <Avatar
      size={32}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      onClick={() => console.log('handle avatar selection')}
      count={1}
    />
    <Avatar
      size={32}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      onClick={() => console.log('handle avatar selection')}
      count={3}
    />
    <Avatar
      size={32}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
      onClick={() => console.log('handle avatar selection')}
      count={10}
    />
  
</Playground>

Color

Loading SpinAvatarwww
<SpacedGroup xs={8}>
    <Avatar
      size={42}
      color={palette.paper}
      backgroundColor={palette.plum}
      src={
        'https://i.pinimg.com/236x/c1/2e/ba/c12eba2c171e51501c00759b3363367c--dapper-suits-bloomberg-businessweek.jpg'
      }
    />
    <Avatar
      size={42}
      color={palette.paper}
      backgroundColor={palette.plum}
      icon={<AvatarIcon />}
    />
    <Avatar
      size={42}
      color={palette.paper}
      backgroundColor={palette.plum}
      title="walker"
    />
    <Avatar
      size={42}
      color={palette.paper}
      backgroundColor={palette.plum}
      title="walker"
      count={0}
    />
    <Avatar
      size={42}
      color={palette.paper}
      backgroundColor={palette.plum}
      title="walker"
      status="online"
    />
  
</Playground>

API

VersionOne Components v9.1.0