Components

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>

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.

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.

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 🚧