Avatar

Use the Avatar component to display the user's profile photo or some default placeholder.

Usage

Import the Avatar component from @avocado-ui/react and render with the required name prop.

import { Avatar } from '@avocado-ui/react'
render(<Avatar name='Maduka Awesome' />)

import { Avatar } from '@avocado-ui/react'
render(<Avatar name='Maduka Awesome' />)

The Avatar component throws an error when the name prop is not specified. It is required because it will be used for the title and alt of the image.

Multiple Avatars

To render multiple Avatar components, wrap them in an AvatarGroup component from @avocado-ui/react. There might be inconsistencies in rendering if you don't put multiple Avatars in the AvatarGroup

MAAM

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Maduka Awesome' />
    <Avatar name='Awesome Maduka' />
  </AvatarGroup>
)

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Maduka Awesome' />
    <Avatar name='Awesome Maduka' />
  </AvatarGroup>
)

Size

Avatar comes in the following sizes - xs, sm, md, lg and xl. Use the size prop to specify the preferred size

MAMAMAMAMA

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Maduka Awesome' size='xs' />
    <Avatar name='Maduka Awesome' size='sm' />
    <Avatar name='Maduka Awesome' size='md' />
    <Avatar name='Maduka Awesome' size='lg' />
    <Avatar name='Maduka Awesome' size='xl' />
  </AvatarGroup>
)

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Maduka Awesome' size='xs' />
    <Avatar name='Maduka Awesome' size='sm' />
    <Avatar name='Maduka Awesome' size='md' />
    <Avatar name='Maduka Awesome' size='lg' />
    <Avatar name='Maduka Awesome' size='xl' />
  </AvatarGroup>
)

Shape

The default Avatar comes in a round shape. You might want to customize it by setting the shape prop to either round, curve, or square.

MAMAMA

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Maduka Awesome' shape='square' />
    <Avatar name='Maduka Awesome' shape='round' />
    <Avatar name='Maduka Awesome' shape='curve' />
  </AvatarGroup>
)

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Maduka Awesome' shape='square' />
    <Avatar name='Maduka Awesome' shape='round' />
    <Avatar name='Maduka Awesome' shape='curve' />
  </AvatarGroup>
)

Image Source

Most avatars show profile images. If you pass a URI to an image to the src prop, Avatar will render an the image. The src can also be a link to an image on the internet.

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar
      name='Victor Ofoegbu'
      size='lg'
      src='https://avatars.githubusercontent.com/u/24235881?s=400&u=b1882b58273cf6d184b35b10ef1520a429b6ebc7&v=4'
    />
  </AvatarGroup>
)

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar
      name='Victor Ofoegbu'
      size='lg'
      src='https://avatars.githubusercontent.com/u/24235881?s=400&u=b1882b58273cf6d184b35b10ef1520a429b6ebc7&v=4'
    />
  </AvatarGroup>
)

Accessibility

The Avatar component shows the value of name prop when you hover on it. If the alt prop is not specified, the value of the name prop is used instead. In cases where the icon prop is provided, the role="img" is provided so screen readers can callout the element as an image.

Background Color

The default primary color looks cool as the background for avatars. But you can change it by specifying a valid color value to the color prop.

VOVOVO

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Victor Ofoegbu' bgColor='red' />
    <Avatar name='Victor Ofoegbu' bgColor='blue' />
    <Avatar name='Victor Ofoegbu' shape='round' bgColor='#000' />
  </AvatarGroup>
)

import { Avatar, AvatarGroup } from '@avocado-ui/react'
render(
  <AvatarGroup>
    <Avatar name='Victor Ofoegbu' bgColor='red' />
    <Avatar name='Victor Ofoegbu' bgColor='blue' />
    <Avatar name='Victor Ofoegbu' shape='round' bgColor='#000' />
  </AvatarGroup>
)

Icon

You can render an Icon instead of an actual profile image. Provide an icon element to the icon prop and the Avatar component will handle the rest. I make use of Icons from react-feather in this example.

import { Avatar, AvatarGroup } from '@avocado-ui/react'
import { User, Activity } from 'react-feather'

render(
  <AvatarGroup>
    <Avatar name='Victor Ofoegbu' icon={<User />} />
    <Avatar name='Victor Ofoegbu' icon={<Activity />} />
    <Avatar name='Victor Ofoegbu' shape='round' bgColor='rebeccapurple' />
  </AvatarGroup>
)

import { Avatar, AvatarGroup } from '@avocado-ui/react'
import { User, Activity } from 'react-feather'

render(
  <AvatarGroup>
    <Avatar name='Victor Ofoegbu' icon={<User />} />
    <Avatar name='Victor Ofoegbu' icon={<Activity />} />
    <Avatar name='Victor Ofoegbu' shape='round' bgColor='rebeccapurple' />
  </AvatarGroup>
)

Props Table

property	description	type	default
size	size of button	`xs`, `sm`, `md`,`lg`, `number`	`md`
shape	shape of button	`round`, `square`,`curve`	`round`
alt	Text to read out to screen readers. If not available, the value of the `name` is used	`string`
name	Name to show if image is not available	`string`
src	Source for avatar image	`string`
color	color of avatar background when `src` is not specified	`string`
icon	icon to show when the `src` prop is not provided	`React.ReactNode`