Avatar

Displays a user avatar with image, generated fallback, and optional status indicator.

Default

The default avatar shows the generated fallback state that most pages will rely on before image data is available.

tsx

<Avatar name="John Doe" />

Installation

tsx

import { Avatar } from "madagent";

Sizes

tsx

<div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
  <Avatar name="XS" size="xs" />
  <Avatar name="SM" size="sm" />
  <Avatar name="MD" size="md" />
  <Avatar name="LG" size="lg" />
  <Avatar name="XL" size="xl" />
</div>

With Status

tsx

<div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
  <Avatar name="Online" status="online" />
  <Avatar name="Offline" status="offline" />
  <Avatar name="Busy" status="busy" />
  <Avatar name="Away" status="away" />
</div>

With Image

tsx

<Avatar src="https://i.pravatar.cc/80?u=demo" alt="Demo user" />

API Reference

Prop	Type	Default	Description
`src`	`string`	-	Image URL for the avatar
`alt`	`string`	`""`	Alt text for the avatar image
`name`	`string`	-	Name used for the fallback avatar generation
`size`	`"xs""sm""md""lg""xl"`	`"md"`	Avatar size
`status`	`"online""offline""busy""away"`	-	Status indicator dot

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Usage

tsx

<div style={{ display: "flex", justifyContent: "center" }}>
  <Avatar name="علي" size="lg" />
</div>