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
// Otis Admin PRO Components
import MDAvatar from "components/MDAvatar";
Props Information
Name | Type | Default | Description |
---|---|---|---|
bgColor | 'transparent''primary''secondary''info''success''warning''error''light''dark' | transparent | Change the MDAvatar background color if src is not defined. |
size | 'xs''sm''md''lg''xl''xxl' | md | Change the MDAvatar size. |
shadow | 'none''xs''sm''md''lg''xl''xxl''inset' | none | Set a box-shadow for the MDAvatar . |
MUI Props | You can pass all of the MUI Avatar props for the MDAvatar as well. |
Sizes
// Otis Admin PRO Components
import MDAvatar from "components/MDAvatar";
With Icon
// Otis Admin PRO Components
import MDAvatar from "components/MDAvatar";
// @mui material components
import Icon from "@mui/material/Icon"
Variants
// Otis Admin PRO Components
import MDAvatar from "components/MDAvatar";