Overview

A fallback image element to represent a user.

Preview

Code

import {
  Avatar,
  AvatarImage,
  AvatarIconFallback,
  AvatarTextFallback,
} from '@inpulse-ui/avatar';

export function Demo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/josantana.png" />
      <AvatarTextFallback>JS</AvatarTextFallback>
      <AvatarIconFallback />
    </Avatar>
  );
}

About

This component is an expansion of the Avatar developed and maintained by Radix UI.

You can control the appearance of the avatar through the shape and size properties. This component also provides two types of fallbacks: one that displays the user’s initials and another that shows a default icon when the image is unavailable.

Installation

pnpm

pnpm add @inpulse-ui/avatar

bun

bun add @inpulse-ui/avatar

yarn

yarn add @inpulse-ui/avatar

npm

npm install @inpulse-ui/avatar

API Reference

Root

Contains all the parts of an avatar.

Prop	Type	Default Value	Required
asChild	boolean	false	No
size	enum	smmdlg	No
shape	enum	circlesquare	No

Image

The image to render. By default it will only render when it has loaded. You can use the onLoadingStatusChange handler if you need more control.

Prop	Type	Default Value	Required
asChild	boolean	false	No
onLoadingStatusChange	function	-	No

Fallbacks

An element that renders when the image hasn’t loaded. This means whilst it’s loading, or if there was an error. If you notice a flash during loading, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections. The following fallback components are available: AvatarTextFallback and AvatarIconFallback.

Prop	Type	Default Value	Required
asChild	boolean	false	No
delayMs	number	-	No

Usage

Inside the Avatar component, you can use the AvatarImage to display an image and the AvatarTextFallback or AvatarIconFallback to display a fallback element when the image is not available or still loading.

<Avatar>
  <AvatarImage src="https://github.com/josantana.png" />
  <AvatarTextFallback>JS</AvatarTextFallback>
</Avatar>

Examples

Circle

By default, all avatars are round.

Preview

Code

import {
  Avatar,
  AvatarTextFallback,
  AvatarImage,
} from '@inpulse-ui/avatar';

export function Demo() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/josantana.png" />
      <AvatarTextFallback>JS</AvatarTextFallback>
    </Avatar>
  );
}

Square

To get a squared avatar, you can change the shape property to square.

Preview

Code

import {
  Avatar,
  AvatarTextFallback,
  AvatarImage,
} from '@inpulse-ui/avatar';

export function Demo() {
  return (
    <Avatar shape="square">
      <AvatarImage src="https://github.com/josantana.png" />
      <AvatarTextFallback>JS</AvatarTextFallback>
    </Avatar>
  );
}

Text fallback

Preview

JS

Code

import {
  Avatar,
  AvatarTextFallback,
} from '@inpulse-ui/avatar';

export function Demo() {
  return (
    <Avatar>
      <AvatarTextFallback>JS</AvatarTextFallback>
    </Avatar>
  );
}

Icon fallback

Preview

Code

import {
  Avatar,
  AvatarIconFallback,
} from '@inpulse-ui/avatar';

export function Demo() {
  return (
    <Avatar>
      <AvatarIconFallback />
    </Avatar>
  );
}

If no image or fallback text is provided for whatever reason, the icon will be displayed.

Custom icon fallback

You can use custom icons instead of the one provided by AvatarIconFallback. To do this, simply pass the desired icon as a child of that element.