Avatar

Used to display an avatar or brand.

Import

MainIndividual
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 Description Version
alt string This attribute defines the alternative text for the image avatar.
bordered boolean Whether to show the border. Version 5.59.0 or above
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 ColorScheme | CSSProperties['color'] Set the background color of the avatar. Version 5.59.0 or above
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. Version 5.59.0 or above
size Size | ('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 Size Set the size of all avatars.
spacing number Set the spacing of the avatars.
stack boolean Render all avatars as stacks.

ColorScheme 

type Color = 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet';
type ShadeValue = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;

// Color with shade type (e.g., red.50, blue.500)
type ColorShade = `${Colours}.${ShadeValue}` | `${ColorGray}.${ShadeValue}`;

// Combined type that allows both basic colors and colors with shades
type ColorScheme = Color | ColorShade;

Size 

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';