Used to display an avatar or brand.


import { Avatar, AvatarGroup } from 'rsuite';



Character avatar

Icon avatars

Image avatars




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



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.


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.
Vercel banner