Devie UI

<Avatar />

JDMKSMRB

The Avatar component extends Base UI's Avatar. It's a simple component displaying an image, and a fallback to text if the image is not present.

Installation

Here is the component implementation code that you can copy to your project:

// https://base-ui.com/react/components/avatar
 
import { Avatar as BaseAvatar } from "@base-ui-components/react/avatar";
import clsx from "clsx";
import styles from "./Avatar.module.scss";
 
// Root component
interface RootProps extends BaseAvatar.Root.Props {
  className?: string;
}
 
function Root({ className, ...props }: RootProps) {
  return (
    <BaseAvatar.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
// Image component
interface ImageProps extends BaseAvatar.Image.Props {
  className?: string;
}
 
function Image({ className, ...props }: ImageProps) {
  return (
    <BaseAvatar.Image className={clsx(styles.image, className)} {...props} />
  );
}
 
// Fallback component
interface FallbackProps extends BaseAvatar.Fallback.Props {
  className?: string;
}
 
function Fallback({ className, ...props }: FallbackProps) {
  return (
    <BaseAvatar.Fallback
      className={clsx(styles.fallback, className)}
      {...props}
    />
  );
}
 
const Avatar = {
  Root,
  Image,
  Fallback,
};
 
export default Avatar;

Use Cases

Simple avatar with image

The basic usage shows an avatar with an image. The Avatar.Image component handles loading the image, while Avatar.Fallback is displayed while the image loads or if it fails.

JD

Avatar with fallback

When the image fails to load or isn't provided, the fallback content is displayed. This is typically used to show user initials.

JSAB

Custom sizes

The default avatar size is 48×48px. You can customize the size by passing inline styles or a custom className to the Avatar.Root component. The fallback text automatically scales thanks to CSS container queries.

JDSMACTW