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