Avatar #

Used to display an avatar or brand.

Import #

import { Avatar, AvatarGroup } from 'rsuite';

// or
import Avatar from 'rsuite/Avatar';
import AvatarGroup from 'rsuite/AvatarGroup';

Examples #

Basic #

Character avatar #

You can change the <Avatar> background color and font color by style;

Icon avatars #

Image avatars #

You can set alt for <Avatar> , it make sure avatar show pure text avatar when image load failed.

Sizes #

Stacked avatars #

With badge #

Props #

<Avatar> #

Property	Type(Default)	Description
alt	string	This attribute defines the alternative text for the image avatar
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
imgProps	object	Attributes applied to the img element if the component is used to display an image.
size	'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	enum: '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