Avatar

A fallback image element to represent a user. You can control the appearance of the avatar through the shape and size properties.

Installation

pnpm add @inpulse-ds/avatar

Usage

import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from '@inpulse-ds/avatar';

return (
    <Avatar>
      <AvatarImage src="https://github.com/josantana.png" />
      <AvatarFallback>JS</AvatarFallback>
    </Avatar>
  );

Examples

Circle

By default, all avatars are round.

Square

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

Fallback