Avatar

Usage

import { Avatar } from 'matterial'

function App() {
  return <Avatar alt="John Doe">JD</Avatar>
}

Image Avatar

<Avatar src="/img/avatar.png" alt="Mr Banana Grabber" />

Monogram Avatar

<Avatar>A</Avatar>
<Avatar color="primary">BC</Avatar>
<Avatar color="secondary">DEF</Avatar>
<Avatar color="green">G</Avatar>
<Avatar color="red">R</Avatar>

Sizes

Input a number into the size prop to change the diameter of the avatar. The default value is 40.

<Avatar size={20} />
<Avatar />
<Avatar size={60} />

Avatar Group

Group together multiple avatars.

<AvatarGroup max={3}>
  <Avatar>🧑</Avatar>
  <Avatar>👨‍🦰</Avatar>
  <Avatar>👩‍🦰</Avatar>
  <Avatar>👱‍♀️</Avatar>
  <Avatar>👴</Avatar>
</AvatarGroup>

Total avatars

Use the total prop to control the total number of avatars

<AvatarGroup total={13}>
  <Avatar>🙈</Avatar>
  <Avatar>🙉</Avatar>
  <Avatar>🙊</Avatar>
</AvatarGroup>

With Badge

<Badge variant="dot" color="red">
  <Avatar>A</Avatar>
</Badge>
<Badge content={<Avatar size={20}>💩</Avatar>}>
  <Avatar>B</Avatar>
</Badge>

Other Props

Tooltip

tooltip = string | boolean

The tooltip prop takes a string or boolean value. Ifboolean, the alt prop is used as the tooltip label.

Overload Element

as = string | Component

Use the as prop to override the component root node with an HTML element (string) or another React Element.