Avatar
User representation with image or fallback initials.
Examples
Image
Avatars displaying a user photo with rounded clipping.
Sizes
sm, md, and lg avatar sizes using initials fallback.
Initials
Avatars rendered from name initials when no image is supplied.
Group (overlapping)
Stacked avatar group for showing team members.
With status badge
Avatar with an online / offline presence indicator.
With name
Avatar paired with display name and secondary label.
Installation
pnpm add @rokle/components @rokle/tokensInstalls with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.
Usage
import { Avatar } from "@rokle/components";import { Avatar } from "@rokle/components";
export function Example() {
return (
<div className="flex items-center gap-3">
<Avatar fallback="AB" size="sm" />
<Avatar fallback="CD" size="md" />
<Avatar fallback="EF" size="lg" />
<Avatar src="/avatar.jpg" fallback="GH" />
</div>
);
}Source
The implementation source for this component. Copy it into your project and customise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| src | string | - | Image URL. |
| fallback | string | - | Initials to display when no image. |
| size | "sm" | "md" | "lg" | "md" | Avatar size. |
| alt | string | - | Image alt text. |