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