Avatar
Avatars display user profile images or placeholders.
Import
import { Avatar } from "@gumtree/ui/Avatar" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL of the avatar image |
alt | string | - | Alt text for the image |
size | "sm" | "md" | "lg" | - | Size of the avatar |
placeholder | string | - | Text shown when no image is provided |
online | boolean | false | Show online status indicator |
Examples
With Image
Avatars with a profile image at different sizes.
< Avatar src = "https://api.dicebear.com/9.x/thumbs/svg?seed=Alice" alt = "Alice" size = "sm" />
< Avatar src = "https://api.dicebear.com/9.x/thumbs/svg?seed=Alice" alt = "Alice" size = "md" />
< Avatar src = "https://api.dicebear.com/9.x/thumbs/svg?seed=Alice" alt = "Alice" size = "lg" /> Placeholder
When no image is available, a text placeholder is shown.
AB
CD
< Avatar placeholder = "AB" size = "md" />
< Avatar placeholder = "CD" size = "md" /> Online Status
Avatars can show an online status indicator.
ON
OF
< Avatar placeholder = "ON" size = "md" online />
< Avatar placeholder = "OF" size = "md" />