Avatar | Zalify UI

React

Usage

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

<Avatar.Root>
  <Avatar.Image src="https://shorturl.at/gaV8r" />
  <Avatar.Fallback name="Christian Busch" />
</Avatar.Root>

Examples

Sizes

Use the size prop to change the size of the avatar.

React

Variants

Use the variant prop to change the variant of the avatar.

React

Shapes

Use the shape prop to change the shape of the avatar.

React

Fallback

If the image fails to load, the avatar will display the user’s initial. When no name is provided, a generic icon is shown instead.

React

Colors

Combine the colorPalette prop with some custom logic to dynamically change the color of the avatar.

React

Ring

Use the outline props to add a ring around the avatar.

React

Group

The Group component lets you display multiple avatars together. Use the stacking prop to control the order in which avatars overlap.

React

Badge

Show a badge on the right corner of the avatar by composing the Float and Circle components.

React

Persona

Here's an example of how to use the Avatar component to display a user persona.

Ryan Zou

ryan@zalify.com

React

Next.js

Here's an example of how to compose the avatar with Next.js Image.

import { getImageProps } from "next/image"
import { Avatar } from "@zalify-ui/react"

export const App = () => {
  const imageProps = getImageProps({
    src: "/image.png",
  })
  return (
    <Avatar.Root>
      <Avatar.Fallback name="Christian Busch" />
      <Avatar.Image {...imageProps} />
    </Avatar.Root>
  )
}

Closed Component

Here's how to setup the avatar for a closed component composition.

import { forwardRef, type ImgHTMLAttributes } from 'react'
import { Avatar as StyledAvatar } from '@zalify-ui/react'

type ImageProps = ImgHTMLAttributes<HTMLImageElement>

export interface AvatarProps extends StyledAvatar.RootProps {
  name?: string
  src?: string
  srcSet?: string
  loading?: ImageProps['loading']
  icon?: React.ReactElement
  fallback?: React.ReactNode
}

export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(props, ref) {
  const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props
  return (
    <StyledAvatar.Root ref={ref} {...rest}>
      <StyledAvatar.Fallback name={name}>{fallback || icon}</StyledAvatar.Fallback>
      <StyledAvatar.Image src={src} srcSet={srcSet} loading={loading} />
      {children}
    </StyledAvatar.Root>
  )
})

Props

Root

Prop	Default	Type
`size`	`'md'`	`'full' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`
`variant`	`'subtle'`	`'solid' \| 'surface' \| 'subtle' \| 'outline'`
`shape`	`'full'`	`'full' \| 'square' \| 'rounded'`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`		`Partial<{ root: string; image: string; fallback: string }>` The ids of the elements in the avatar. Useful for composition.
`onStatusChange`		`(details: StatusChangeDetails) => void` Functional called when the image loading status changes.

Fallback

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Image

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.