Avatar
The Avatar component builds on the Button and
Image components. By default, it set the
node of the Image to the Button's
startIcon prop and userName to the Button's label.Props
Props of the Button component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| Component | node | Button | The component used for the root node |
| ImageComponent | node | Image | The component used for the image |
| ImageComponentProps | object | Passing props to the ImageComponent | |
| userName | string | Use like the button label | |
| letter | string | if there is no image, this can be used instead of the first character of the userName | |
| imagePropName | string | 'startIcon' | This prop name is used when entering the Image node value for the root (Button, MenuItem, Label) component |
The
ref is forwarded to the root element.AvatarBox
Props
Props of the Button component are also available.
| Name | Type | Default | Description |
|---|---|---|---|
| Component | node | Button | The component used for the root node |
| ImageComponent | node | Image | The component used for the image |
| ImageComponentProps | object | Passing props to the ImageComponent | |
| PaperComponent | node | Image | It used for the background node of the letter or the image |
| PaperComponentProps | object | Passing props to the PaperComponent | |
| imageSize | string | Usable to set custom image size css value eg.: "120px" | |
| userName | string | Avatar heading | |
| letter | string | if there is no image, this can be used instead of the first character of the userName | |
| UserNameComponent | node | Typography | The component used for the userName text |
| UserNameComponentProps | object | Passing props to the UserNameComponent | |
| secondaryText | string | Text below the user name text | |
| SecondaryTextComponent | node | Typography | The component used for the SecondaryText text |
| SecondaryTextComponentProps | object | Passing props to the SecondaryTextComponent | |
| welcomeText | string | Text above the user name text | |
| WelcomeTextComponent | node | Typography | The component used for the WelcomeText text |
| WelcomeTextComponentProps | object | Passing props to the WelcomeTextComponent | |
| inline | bool | if true, the texts are displayed in the column next to the avatar image |
The
ref is forwarded to the root element.Example
Avatar like a button
Different variants
Like an icon button
Circle
Without image
Avatar like a label
John Doe
John Doe
John Doe
MenuItem
Menu
AvatarBox
Hello,
John Doe
Without image
Hello,
John Doe
AvatarBox 2