Avatar
An avatar is a visual representation of a user or entity.
#Default
Use an avatar to represent a person.
AM
import { Avatar } from '@wolf-rayet/react';
<Avatar name="Ava Mensah" />#Sizes
Use a size that suits the density of the surface.
AMAMAMAMAM
import { Avatar } from '@wolf-rayet/react';
<Avatar name="Ava Mensah" size="xsmall" />
<Avatar name="Ava Mensah" size="small" />
<Avatar name="Ava Mensah" size="medium" />
<Avatar name="Ava Mensah" size="large" />
<Avatar name="Ava Mensah" size="xlarge" />#Appearance
Use a square avatar for an entity rather than a person.
AMSBSB
import { Avatar } from '@wolf-rayet/react';
<Avatar name="Ava Mensah" appearance="circle" />
<Avatar name="Support bot" appearance="square" />
<Avatar name="Support bot" appearance="square" size="large" />#Presence
Use presence to show whether someone is available.
AMPSMTSO
import { Avatar } from '@wolf-rayet/react';
<Avatar name="Ava Mensah" presence="online" />
<Avatar name="Priya Shah" presence="busy" />
<Avatar name="Mei Tan" presence="focus" />
<Avatar name="Sam Okafor" presence="offline" />#Disabled
Use a disabled avatar when the person cannot be selected.
LF
import { Avatar } from '@wolf-rayet/react';
<Avatar name="Lena Fischer" isDisabled />