Avatar

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

	<script lang="ts">
  import { Avatar } from "$lib";
  export let loadingStatus: Avatar.Props["loadingStatus"] = undefined;
</script>
 
<Avatar.Root
  bind:loadingStatus
  class="h-12 w-12 rounded-full border {loadingStatus === 'loaded'
    ? 'border-foreground'
    : 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
  <div
    class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
  >
    <Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
    <Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
  </div>
</Avatar.Root>

	<script lang="ts">
  import { Avatar } from "$lib";
  export let loadingStatus: Avatar.Props["loadingStatus"] = undefined;
</script>
 
<Avatar.Root
  bind:loadingStatus
  class="h-12 w-12 rounded-full border {loadingStatus === 'loaded'
    ? 'border-foreground'
    : 'border-transparent'} bg-muted text-[17px] font-medium uppercase text-muted-foreground"
>
  <div
    class="flex h-full w-full items-center justify-center overflow-hidden rounded-full border-2 border-transparent"
  >
    <Avatar.Image src="/avatar-1.png" alt="@huntabyte" />
    <Avatar.Fallback class="border border-muted">HB</Avatar.Fallback>
  </div>
</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`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

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`
`el`	`HTMLImageElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions 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`
`el`	`HTMLSpanElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

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

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