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