Pular para o conteúdo

Avatar API

Documentação da API para o componente React Avatar . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Avatar from '@mui/material/Avatar';
// ou
import { Avatar } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

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

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
altstring
Used in combination with src or srcSet to provide an alt attribute for the rendered img element.
childrennode
Used to render icon or text elements inside the Avatar if src is not set. This can be an element, or just a string.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
imgPropsobject
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.
sizesstring
The sizes attribute for the img element.
srcstring
The src attribute for the img element.
srcSetstring
The srcSet attribute for the img element. Use this attribute for responsive image display.
sxArray<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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiAvatar-rootEstilos aplicados ao elemento raiz.
colorDefault.MuiAvatar-colorDefaultEstilos aplicados para o elemento raiz se not src or srcSet.
circular.MuiAvatar-circularEstilos aplicados para o elemento raiz se variant="circular".
rounded.MuiAvatar-roundedEstilos aplicados para o elemento raiz se variant="rounded".
square.MuiAvatar-squareEstilos aplicados para o elemento raiz se variant="square".
img.MuiAvatar-imgEstilos aplicados para the img element se either src or srcSet is defined.
fallback.MuiAvatar-fallbackStyles applied to the fallback icon

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações