Avatar #

Used to display an avatar or brand.

Import #

import { Avatar, AvatarGroup } from 'rsuite';

Examples #

Basic #

Character avatar #

Icon avatars #

Image avatars #

Size #

Bordered #

Color #

Avatar Fallbacks #

If there is an error loading the src of the avatar, there are 2 fallbacks:

1. If there is an alt prop, the value of the alt attribute will be rendered.
2. If there is no alt prop, a default avatar will be rendered.

Stacked avatars #

With badge #

Props #

<Avatar> #

Property	Type(Default)	Description
alt	string	This attribute defines the alternative text for the image avatar.
bordered	boolean	Whether to show the border.
children	string, Element	Content(It maybe text or icon).
circle	boolean	Render a circle avatar.
classPrefix	string ('avatar')	The prefix of the component CSS class.
color	string	Set the background color of the avatar.
imgProps	object	Attributes applied to the img element if the component is used to display an image.
onError	(event) => void	Callback when the image fails to load.
size	'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' ('md')	Size of avatar.
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.

<AvatarGroup> #

Property	Type(Default)	Description
size	'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs'	Set the size of all avatars.
spacing	number	Set the spacing of the avatars.
stack	boolean	Render all avatars as stacks.