Avatar component to display the user's profile photo or some default placeholder.
Avatar component from
@avocado-ui/react and render with the required
Avatarcomponent throws an error when the
nameprop is not specified. It is required because it will be used for the
altof the image.
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
Avatar comes in the following sizes -
xl. Use the
size prop to specify the preferred size
Avatar comes in a
round shape. You might want to customize it by setting the
shape prop to either
Most avatars show profile images. If you pass a
URI to an image to the
Avatar will render an the image. The
src can also be a link to an image on the internet.
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.
primary color looks cool as the background for avatars. But you can change it by specifying a valid color value to the
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.
|size||size of button|
|shape||shape of button|
|alt||Text to read out to screen readers. If not available, the value of the |
|name||Name to show if image is not available|
|src||Source for avatar image|
|color||color of avatar background when |
|icon||icon to show when the |