React Avatar - Argon

Create avatar with different styles simply by using ArgonAvatar component. It uses the MUI Avatar in base and you can use all of the props from MUI Avatar for the ArgonAvatar component.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Argon Dashboard 2 MUI Components import ArgonAvatar from "components/ArgonAvatar";
Avatar

Props Information

NameTypeDefaultDescription
bgColor'transparent''primary''secondary''info''success''warning''error''light''dark'transparentChange the ArgonAvatar background color if src is not defined.
size'xs''sm''md''lg''xl''xxl'mdChange the ArgonAvatar size.
shadow'none''xs''sm''md''lg''xl''xxl''inset'noneSet a box-shadow for the ArgonAvatar.
MUI PropsYou can pass all of the MUI Avatar props for the ArgonAvatar as well.

Sizes

// Argon Dashboard 2 MUI Components import ArgonAvatar from "components/ArgonAvatar";
Avatar
Avatar
Avatar
Avatar
Avatar
Avatar

With Icon

// Argon Dashboard 2 MUI Components import ArgonAvatar from "components/ArgonAvatar"; // @mui material components import Icon from "@mui/material/Icon"

Variants

// Argon Dashboard 2 MUI Components import ArgonAvatar from "components/ArgonAvatar";
Avatar
Avatar
Avatar