Avatar

Represents a user or entity with a recognizable image or placeholder in UI elements.

	<script lang="ts">
  import { Avatar } from "$lib";
</script>
 
<Avatar.Root
  class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
  <Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
  <Avatar.Fallback>HB</Avatar.Fallback>
</Avatar.Root>

	<script lang="ts">
  import { Avatar } from "$lib";
</script>
 
<Avatar.Root
  class="flex h-12 w-12 items-center justify-center rounded-full bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
  <Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
  <Avatar.Fallback>HB</Avatar.Fallback>
</Avatar.Root>

Structure

	<script lang="ts">
  import { Avatar } from "bits-ui";
</script>
 
<Avatar.Root>
  <Avatar.Image />
  <Avatar.Fallback />
</Avatar.Root>

	<script lang="ts">
  import { Avatar } from "bits-ui";
</script>
 
<Avatar.Root>
  <Avatar.Image />
  <Avatar.Fallback />
</Avatar.Root>

Component API

Avatar.Root

The root component used to set and manage the state of the avatar.

Property	Type	Description
`delayMs`	`number`	How long to wait before showing the image after it has loaded. This can be useful to prevent a harsh flickering effect when the image loads quickly. `Default: 0`
`loadingStatus`	`LoadingStatus`	The loading status of the avatars source image. You can bind a variable to track the status outside of the component and use it to show a loading indicator or error message. `Default: —— undefined`
`onLoadingStatusChange`	`function`	A callback function called when the loading status of the image changes. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-avatar-root`	`——`	Present on the root element.

Avatar.Image

The avatar image displayed once it has loaded.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-avatar-image`	`——`	Present on the image element.

Avatar.Fallback

The fallback displayed while the avatar image is loading or if it fails to load

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-avatar-fallback`	`——`	Present on the fallback element.

🚧 UNDER CONSTRUCTION 🚧