Avatar

The Avatar is an image element with a fallback for representing the user.

import { Avatar } from '@backyard-ui/core';

Use the appearance prop to change the visual semantic of the Badge.

By default variant prop is solid but you can use subtle to get a different style.

Use the size prop to increase the visual size.

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.

• appearance
  Description The Avatar appearance

  Type

  "success" | "critical" | "info" | "warning" | "neutral" | "primary" | "secondary" | "tertiary"

  Default

  primary
• size
  Description The Avatar size

  Type

  "xs" | "sm" | "md" | "lg" | "xl"

  Default

  md
• variant
  Description The Avatar variant

  Type

  "solid" | "subtle"

  Default

  solid
• asChild
  Description

  Type

  boolean