Components

Avatar

A user image with a graceful fallback for missing or slow-loading sources.

SK

delayMs prevents the fallback from flashing while the image is loading.

Usage

import { Avatar } from '@onersoft/design-system'

<Avatar.Root>
  <Avatar.Image src={user.avatar} alt={user.name} />
  <Avatar.Fallback delayMs={300}>{initials}</Avatar.Fallback>
</Avatar.Root>

Props

PartNotable Props
Rootpassthrough Radix Avatar.Root
Imagesrc, alt, plus passthrough
FallbackdelayMs?: number — wait before showing fallback

On this page