---
name: Avatar
menu: Components
route: /components/avatar
---

import { Playground, PropsTable } from 'docz';
import { Avatar } from '@personio/ui-components';
import "./avatar.scss";

# Avatar

As the name suggests, use this component to show a user avatar. It has two variations -

  - User Image - Shows user's image if there is an image available (src prop)
  - User name initials - If the user's image is not available, you can pass user's
    `name` separated by atleast one whitespace.

<PropsTable of={Avatar} />

## Examples

<Playground>
  <div className="avatarContainer">
    <Avatar
      src="https://i1.sndcdn.com/avatars-000311820517-akolnb-t500x500.jpg"
      alt="Profile"
    />
    <Avatar
      name="Dan Tompkins"
    />
  </div>
</Playground>

## Size customization

By default the height and width of Avatar is 46px. If want to customize the size,
you can specify the height/width through props

<Playground>
  <div className="avatarContainer">
    <Avatar
      alt="Profile"
      height="80px"
      src="https://i1.sndcdn.com/avatars-000311820517-akolnb-t500x500.jpg"
      width="80px"
    />
    <Avatar
      height="80px"
      name="Dan Tompkins"
      width="80px"
    />
  </div>
</Playground>

## Style customization through classNames

You can customize the styling of the avatar by using `wrapperClassName`,
`imgClassName` and `initialsClassName` as applicable.

<Playground>
  <div className="avatarContainer">
    <div className="cutomizedAvatar">
      <span className="avatarHeader">Customized wrapper</span>
      <Avatar
        wrapperClassName="wrapper"
        alt="Profile"
        src="https://i1.sndcdn.com/avatars-000311820517-akolnb-t500x500.jpg"
      />
    </div>
    <div className="cutomizedAvatar">
      <span className="avatarHeader">Customized image</span>
      <Avatar
        wrapperClassName="wrapper"
        imgClassName="customImg"
        alt="Profile"
        src="https://i1.sndcdn.com/avatars-000311820517-akolnb-t500x500.jpg"
      />
    </div>
    <div className="cutomizedAvatar">
      <span className="avatarHeader">Customized initials</span>
      <Avatar
        initialsClassName="customInitials"
        name="Dan Tompkins"
      />
    </div>
  </div>
</Playground>
