Avatar
The Avatar component is a visual element, such as an image, letter(s) or icon, used to represent a user, label or tool.
Properties
Name | Type | Default | Description |
---|---|---|---|
source | string | Defines the path to the image. | |
altText | string | Defines the alt text attribute for the image. | |
sourceSet | string | Defines the srcSet attribute for the image. |
Style Attributes
Name | Type | Default | Description |
---|---|---|---|
variant | circular rounded square string | circular | Specifies the shape of the avatar. |
Subcomponents
The Avatar component has two subcomponents that allow the addition of either an icon or typography to the avatar component.
Icon
An icon to use on the avatar.
For further details, see the Icon component.
Properties
Name | Type | Default | Description |
---|---|---|---|
color | inherit primary secondary action disabled error string | inherit | Defines the color of the icon. |
size | inherit small medium large | medium | Defines the size of the icon. |
viewBox | 0 0 25 25 | Defines the size of the view box that displays the icon. | |
fill | hex #ffffff rgb 5,5,5 | The fill color of the icon. | |
stroke | hex #ffffff rgb 5,5,5 | The stroke color of the icon. |
Typography
The typography to use on the avatar.
For further details, see the Typography component.
Properties
Name | Type | Default | Description |
---|---|---|---|
text | string | Defines the text to display in the text field. | |
variant | h1 h2 h3 h4 h5 h6 subtitle1 subtitle2 body1 body2 caption button overline inherit string | inherit | Defines the type of typography to display. |
color | initial inherit primary secondary textPrimary textSecondary error string | inherit | Defines the color of the typography. |
gutterBottom | bool | false | Enables a gutter at the bottom of the typography component. |
For more detail on the Avatar component, see the MUI developer docs.