MKAvatar
Create avatar with different styles simply by using MKAvatar component. It uses the MUI Avatar in base and you can use all of the props from MUI Avatar for the MKAvatar 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 Kit 2 React Components
import MKAvatar from "components/MKAvatar";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| bgColor | 'transparent''primary''secondary''info''success''warning''error''light''dark' | transparent | Change the MKAvatar background color if src is not defined. |
| size | 'xs''sm''md''lg''xl''xxl' | md | Change the MKAvatar size. |
| shadow | 'none''xs''sm''md''lg''xl''xxl''inset' | none | Set a box-shadow for the MKAvatar. |
| MUI Props | You can pass all of the MUI Avatar props for the MKAvatar as well. |
Sizes
// Material Kit 2 React Components
import MKAvatar from "components/MKAvatar";
With Icon
// Material Kit 2 React Components
import MKAvatar from "components/MKAvatar";
// @mui material components
import Icon from "@mui/material/Icon"
Variants
// Material Kit 2 React Components
import MKAvatar from "components/MKAvatar";