MDAvatar

Create avatar with different styles simply by using MDAvatar component. It uses the MUI Avatar in base and you can use all of the props from MUI Avatar for the MDAvatar 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

// Material Dashboard 2 React Components import MDAvatar from "components/MDAvatar";
Avatar

Props Information

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

Sizes

// Material Dashboard 2 React Components import MDAvatar from "components/MDAvatar";
Avatar
Avatar
Avatar
Avatar
Avatar
Avatar

With Icon

// Material Dashboard 2 React Components import MDAvatar from "components/MDAvatar"; // @mui material components import Icon from "@mui/material/Icon"

Variants

// Material Dashboard 2 React Components import MDAvatar from "components/MDAvatar";
Avatar
Avatar
Avatar