AvatarAn image element with a fallback for representing the user.

The Avatar component displays a user's profile picture with support for fallback content when the image fails to load. It can be customized with different sizes, variants, and colors.

Installation

Install the component from your command line.

npm install @raystack/apsara

import { Avatar, AvatarGroup } from '@raystack/apsara/v1'

  <Avatar
    alt="John Smith"
    src="/path/to/image.jpg"
    fallback="JS"
    size={5}
  />

Avatar Props

The Avatar component accepts the following props:

size: Specifies the size of the avatar (1-13, default: 3)
src: The URL of the image to display
alt: Alternative text description for the image
fallback: Content to display when image fails to load or while loading
variant: Visual style variant ("solid" | "soft", default: "soft")
radius: Border radius style ("small" | "full", default: "small")
color: Color theme for the avatar:
- Base colors: "indigo" | "orange" | "mint" | "neutral"
- Extended colors: "sky" | "lime" | "grass" | "cyan" | "iris" | "purple" | "pink" | "crimson" | "gold"
asChild: Boolean to merge props onto child element
className: Additional CSS class names

AvatarGroup Props

The AvatarGroup component accepts the following props:

children: Array of Avatar components to display
max: Maximum number of avatars to show before displaying a count (number)
className: Additional CSS class names

Size

The Avatar component supports 13 different sizes to accommodate various layout requirements and design needs.

Colors

Avatar comes with a range of predefined colors including both base and extended color options to match your design system.

Variants

Choose between soft and solid variants to control the visual weight and emphasis of the avatar in your interface.

Radius

Choose between small and full border radius styles to match your design preferences.

With Image

Avatar can display user images with graceful fallback to initials when images fail to load or aren't available.