bits
Report an issue

Avatar

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

HB

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

Default:  —— undefined
onLoadingStatusChange
(status: 'loading' | 'loaded' | 'error') => void

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

Default:  —— undefined

Avatar.Image

The avatar image displayed once it has loaded.

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

Default:  —— undefined
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.

Default:  —— undefined
asChild
boolean

Whether to use render delegation with this component or not.

Default: false

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

🚧 UNDER CONSTRUCTION 🚧