Avatar
An image element with a fallback for representing the user.
Usage
import { Avatar } from "@lemonsqueezy/wedges";<Avatar
alt="Image alt text"
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
/>For more advanced usage, you can use the Avatar.Root component to compose your own avatar.
<Avatar.Root>
<Avatar.Image
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=250&h=250&auto=format&fit=crop"
alt="Image alt text"
/>
<Avatar.Fallback>W</Avatar.Fallback>
<Avatar.Notification />
<Avatar.Status />
</Avatar.Root>API Reference
Avatar
Represents an avatar image. Extends the Radix Avatar Image primitive and includes all of its props.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
delayMs | number | / |
initials | string | / |
notification | "primary" | "gray" | "green" | "yellow" | "red" | "gray" |
size | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" |
status | "primary" | "gray" | "green" | "yellow" | "red" | "gray" |
Avatar.Root
When using inner components, you must render the Avatar.Root component as a wrapper to enclose inner Avatar components.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
Avatar.Image
The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
onLoadingStatusChange | function | / |
Avatar.Fallback
An element that renders when the image hasn’t loaded. This means whilst it’s loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections.
For more control, use the onLoadingStatusChange handler on Avatar.Image.
| Prop | Value | Default |
|---|---|---|
asChild | boolean | false |
delayMs | number | / |
Examples
The following example shows an Avatar component with an image, size set to lg, using initials “MQ” as a fallback, and status and notification set to different colors.
The following examples show different variants of the Avatar component.
The following example shows more advanced usage of the Avatar component and how you can customize it with Tailwind CSS classes.