Avatar

Storybook

Go to Story

avatarVariants

const avatarVariants: object;

Defined in: src/components/Avatar/Avatar.tsx:66

Type Declaration

Name	Type	Default value	Description	Defined in
size	object	-	Affects width, height, and font size. - sm: 32px with smaller text. - default: 48px with base text. - lg: 64px with larger text. Default "default"	src/components/Avatar/Avatar.tsx:75
size.sm	string	"size-8 text-xs"	-	src/components/Avatar/Avatar.tsx:76
size.default	string	"size-12"	-	src/components/Avatar/Avatar.tsx:77
size.lg	string	"size-16 text-xl"	-	src/components/Avatar/Avatar.tsx:78

---

avatarVariance()

const avatarVariance: (props?) => string;

Defined in: src/components/Avatar/Avatar.tsx:82

Parameters

Parameter	Type
props?	ConfigVariants<{ size: { sm: string; default: string; lg: string; }; }> & ClassProp

Returns

string

---

getInitials()

function getInitials(value): string;

Defined in: src/components/Avatar/Avatar.tsx:56

Extracts initials from a given name string. For full names, returns first letters of first and last name. For single names, returns first two letters.

Parameters

Parameter	Type
value	string

Returns

string

---

Avatar()

function Avatar(__namedParameters): Element;

Defined in: src/components/Avatar/Avatar.tsx:120

Avatar component that displays a user's profile picture or fallback content. Supports different sizes and can show either an image, custom fallback content, or automatically generated initials from a name.

Parameters

Parameter	Type
__namedParameters	AvatarProps

Returns

Element

Examples

// Basic usage with image
<Avatar src="/path/to/image.jpg" name="John Doe" />

// With custom fallback
<Avatar name="John Doe" fallback={<UserIcon />} />

// With overlay (e.g., status badge)
<Avatar name="John Doe" overlay={<Badge variant="success" />} />

// Different sizes
<Avatar size="sm" name="John Doe" />
<Avatar size="default" name="John Doe" />
<Avatar size="lg" name="John Doe" />