Avatar

Displays user profile images, icons, or fallback content with customizable size, color, borders, and styling for flexible profile representation.

Variants

Avatar Group

Avatar Types

Defualt Avatar

Image Avatar

J

Name Avatar

Colors

Base Color

Ghost Color

Primary Color

Secondary Color

Success Color

Warning Color

Danger Color

Sizes

Small Avatar

Defualt Avatar

Medium Avatar

Large Avatar

XL Avatar

Radius

Default Radius

Small Radius

Medium Radius

Large Radius

XL Radius

2XL Radius

3XL Radius

Full Radius

Features

Supports profile images, icons, and custom fallback content
Configurable sizes, border radius, and color themes
Optional border animation for interactive effects
Handles image loading states with fallback and showFallback support
Allows custom image components and props for advanced control
Accessible and optionally focusable

Props

Prop	Type	Default	Description
src	`string`	—	Source URL of the avatar image.
alt	`string`	—	Alternative text for the avatar image.
isBordered	`boolean`	`true`	Whether to show a border around the avatar.
color	`"base"` \| `"ghost"` \| `"primary"` \| `"secondary"` \| `"success"` \| `"warning"` \| `"danger"`	`"base"`	Color theme of the avatar.
size	`"sm"` \| `"base"` \| `"md"` \| `"lg"` \| `"xl"`	`"base"`	Size of the avatar.
radius	`"sm"` \| `"md"` \| `"lg"` \| `"xl"` \| `"2xl"` \| `"3xl"` \| `"full"` \| `"default"`	`"full"`	Border radius of the avatar.
name	`string`	—	Name used for initials fallback or accessibility.
icon	`ReactNode`	—	Custom icon to display inside the avatar.
fallback	`ReactNode`	—	Content to display when the image fails to load or is not provided.
isDisabled	`boolean`	`false`	Whether the avatar is disabled (non-interactive).
isFocusable	`boolean`	`true`	Whether the avatar is focusable.
showFallback	`boolean`	`false`	Force show the fallback content instead of the image.
imgComponent	`ReactNode`	—	Custom image component for advanced usage.
imgProps	`React.ImgHTMLAttributes<HTMLImageElement>`	—	Additional props for the `img` element.
isBorderAnimation	`boolean`

Alert

Displays important messages or feedback with customizable color, size, style, and appearance to fit various use cases.

Badge

Displays small status indicators or notifications, customizable in color, size, style, and position to match your design.