Avatar

A graphical representation of a user, commonly used in profile sections, comment threads, or user menus.

import { Avatar } from '@fidely-ui/react/avatar'

export const AvatarBasics = () => {
  return (
    <>
      <Avatar.Root size={'lg'}>
        <Avatar.Fallback name="Justice Chimobi" />
        <Avatar.Image
          src={'https://avatars.githubusercontent.com/u/74328318?v=4'}
        />
      </Avatar.Root>
    </>
  )
}

Usage

import { Avatar } from '@fidely-ui/react'

<Avatar.Root>
  <Avatar.Fallback />
  <Avatar.Image />
</Avatar.Root>

Sizes

You can control the size of the Avatar using the size prop.

import { Avatar } from '@fidely-ui/react/avatar'

export const AvatarSizes = () => {
  return (
    <>
      <Avatar.Root size={'xl'}>
        <Avatar.Image src={'http://bit.ly/43kBcJt'} />
      </Avatar.Root>

      <Avatar.Root size={'md'}>
        <Avatar.Image src={'http://bit.ly/47jPX1D'} />
      </Avatar.Root>

      <Avatar.Root size={'xs'}>
        <Avatar.Image src={'https://rb.gy/39f8mx'} />
      </Avatar.Root>
    </>
  )
}

Fallback

When no image source is provided, the Avatar automatically renders the user’s initials and when no initial value it displays an icon.

import { Avatar } from '@fidely-ui/react/avatar'

export const AvatarFallback = () => {
  return (
    <>
      <Avatar.Root>
        <Avatar.Fallback name="Justice Chimobi" />
      </Avatar.Root>

      <Avatar.Root>
        <Avatar.Fallback />
      </Avatar.Root>
    </>
  )
}

Props

Root

Prop	Default	Type	Description
`colorPalette`	`gray`	`"red" \| "blue" \| "green" \| "purple" \| "orange" \| "gray"`	The color palette of the component.
`size`	`md`	`'full' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	The size of the component.
`variant`	`subtle`	`'solid' \| 'subtle' \| 'outline'`	The variant of the component.
`shape`	`full`	`'square' \| 'rounded' \| 'full'`	The shape of the component.
`as`	—	`React.ElementType`	The underlying element to render.
`asChild`	`false`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.
`unstyled`	`false`	`boolean`	Whether to remove the component's style.
`ids`	—	`Partial<{ root: string; image: string; fallback: string }>`	The ids of the elements in the avatar. Useful for composition.
`onStatusChange`	—	`(details: StatusChangeDetails) => void`	Function called when the image loading status changes.
`borderless`	`false`	`'true' \| 'false'`	Controls whether the avatar is rendered without a border.

Fallback

Prop	Default	Type	Description
`name`	—	`string \| undefined`	The name to derive the initials from. If not provided, displays a generic icon.
`as`	—	`React.ElementType`	The underlying element to render.
`asChild`	`false`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.

Image

Prop	Default	Type	Description
`as`	—	`React.ElementType`	The underlying element to render.
`asChild`	`false`	`boolean`	Use the provided child element as the default rendered element, combining their props and behavior.