bits

Avatar

Displays user or entity images with a fallback option for failed loading, ensuring consistent visual representation.

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

Root

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

Prop Default Type/Description
delayMs 0 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.
loadingStatus

-

 'loading' | 'loaded' | 'error'

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.
onLoadingStatusChange

-

 (status: 'loading' | 'loaded' | 'error') => void

A callback function called when the loading status of the image changes.

Image

The avatar image displayed once it has loaded.

Prop Default Type/Description
src

-

 string

The source of the image. This is typed the same as the native img element so you can use any valid img src value.
alt

-

 string

The alt text of the image. This is typed the same as the native img element so you can use any valid img alt value.
asChild false boolean

Whether to use render delegation with this component or not.

Fallback

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

Prop Default Type/Description
asChild false boolean

Whether to use render delegation with this component or not.

🚧 UNDER CONSTRUCTION 🚧