Avatar #

Used to display an avatar or brand.

Import #

import { Avatar } from 'rsuite';

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

Examples #

Default #

Text #

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

With Icon #

Image avatar #

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

Size #

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	enum: '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.