avatar

avatarUrl
Not required
string
URL for the avatar image (displays image when provided)
name
Not required
string
User's display name (used for initials in fallback)
className
Not required
string
Additional CSS classes to apply to the avatar
active
Not required
bool
true
Whether the avatar is active (dims when false)

Display a user avatar with automatic fallback to initials.

Examples

Basic Usage

Display an avatar with an image URL.

Initials Fallback

When no image is provided, the avatar displays initials with a color based on the name.

Different Names and Colors

Each name generates a consistent color from a palette of blue, green, purple, or orange.

Active State

Use the active prop to dim the avatar when inactive.