import Avatar from '@mui/material/Avatar';
// or
import { Avatar } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.
Props of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
alt | string | - | Used in combination with src or srcSet to provide an alt attribute for the rendered img element. |
children | node | - | Used to render icon or text elements inside the Avatar if src is not set. This can be an element, or just a string. |
classes | object | - | Override or extend the styles applied to the component. See CSS classes API below for more details. |
component | elementType | - | The component used for the root node. Either a string to use a HTML element or a component. |
imgProps | object | - | Attributes applied to the img element if the component is used to display an image. It can be used to listen for the loading error event. |
sizes | string | - | The sizes attribute for the img element. |
slotProps | { img?: func | object } | {} | The props used for each slot inside. |
slots | { img?: elementType } | {} | The components used for each slot inside. |
src | string | - | The src attribute for the img element. |
srcSet | string | - | The srcSet attribute for the img element. Use this attribute for responsive image display. |
sx | Array<func | object | bool> | func | object | - | The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details. |
variant | ‘circular’ | ‘rounded’ | ‘square’ | string | ‘circular’ | The shape of the avatar. |
The ref
is forwarded to the root element.
You can use MuiAvatar
to change the default props of this component with the theme.
Slot name | Class name | Default component | Description |
---|---|---|---|
img | .MuiAvatar-img | Collapse |
The component that renders the transition. Follow this guide to learn more about the requirements for this component. |
These class names are useful for styling with CSS. They are applied to the component’s slots when specific states are triggered.
Class name | Rule name | Description |
---|---|---|
.MuiAvatar-circular | circular | Styles applied to the root element if variant="circular" . |
.MuiAvatar-colorDefault | colorDefault | Styles applied to the root element if not src or srcSet . |
.MuiAvatar-fallback | fallback | Styles applied to the fallback icon |
.MuiAvatar-root | root | Styles applied to the root element. |
.MuiAvatar-rounded | rounded | Styles applied to the root element if variant="rounded" . |
.MuiAvatar-square | square | Styles applied to the root element if variant="square" . |
You can override the style of the component using one of these customization options:
styleOverrides
property in a custom theme.If you did not find the information in this page, consider having a look at the implementation of the component for more detail.