Avatar API

API documentation for the React Avatar component. Learn about the available props, and the CSS API.

Import

import Avatar from '@material-ui/core/Avatar';
// ou
import { Avatar } from '@material-ui/core';

The name MuiAvatar can be used when providing default props or style overrides in the theme.

Nome	Tipo	Padrão	Descrição
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 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.
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	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.

O ref é encaminhado para o elemento raiz.
Any other props supplied will be provided to the root element (native element).

Rule name	Global class	Descrição
root	.MuiAvatar-root	Styles applied to the root element.
colorDefault	.MuiAvatar-colorDefault	Styles applied to the root element if not `src` or `srcSet`.
circular	.MuiAvatar-circular	Styles applied to the root element if `variant="circular"`.
rounded	.MuiAvatar-rounded	Styles applied to the root element if `variant="rounded"`.
square	.MuiAvatar-square	Styles applied to the root element if `variant="square"`.
img	.MuiAvatar-img	Styles applied to the img element if either `src` or `srcSet` is defined.
fallback	.MuiAvatar-fallback	Styles applied to the fallback icon

You can override the style of the component using one of these customization options:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.