Avatar

A circular image element for representing users with support for image sources and text fallbacks.

Preview

With Images

ZTZTZT

Fallback Sizes

AMPSRS

Traveller Group

AMPSRSNPVK

Usage

tsx

import { Avatar, AvatarImage, AvatarFallback } from "zostel-ui";

{/* With image */}
<Avatar>
  <AvatarImage src="/user.jpg" alt="User" />
  <AvatarFallback>AK</AvatarFallback>
</Avatar>

{/* Fallback only */}
<Avatar>
  <AvatarFallback>AK</AvatarFallback>
</Avatar>

Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the avatar container
`src`	`string`	—	Image source URL (on AvatarImage)
`alt`	`string`	—	Alt text for the image (on AvatarImage)
`children`	`ReactNode`	—	Fallback content, typically initials (on AvatarFallback)

className

Type: string

Default: —

Additional CSS classes for the avatar container

src

Type: string

Default: —

Image source URL (on AvatarImage)

alt

Type: string

Default: —

Alt text for the image (on AvatarImage)

children

Type: ReactNode

Default: —

Fallback content, typically initials (on AvatarFallback)

Previous Table Next Progress