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

Default

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