Avatar

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

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.

WEDGES

The following example shows more advanced usage of the Avatar component and how you can customize it with Tailwind CSS classes.

Wedges