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