Avatar

Version - 0.0.8

An image element with a fallback for representing the user.

Installation

npm install @volta/avatar

Usage

import { Avatar  } from '@volta/avatar';
 
Avatar size="xl" src="https://i.pravatar.cc/120" fallback="XS" alt="Xavier Sebsilutasakaja" />;

Examples

Sizes

The Avatar component comes with 5 different sizes that you can change it using the size prop.

import { Avatar } from '@volta/avatar';
 
export function AvatarSizes() {
  return (
    <div className="flex gap-2">
      <Avatar size="sm"  src="https://i.pravatar.cc/120" alt="@shadcn" />
      <Avatar size="md"  src="https://i.pravatar.cc/120" alt="@shadcn" />
      <Avatar size="lg"  src="https://i.pravatar.cc/120" alt="@shadcn" />
      <Avatar size="xl"  src="https://i.pravatar.cc/120" alt="@shadcn" />
      <Avatar size="xxl"  src="https://i.pravatar.cc/120" alt="@shadcn" />
    </div>
  );
}

Custom Styles

To use custom styling use Tailwind on the Default Exported molecule or use the at atomic components in compostion pattern.

Default

import { Avatar } from '@volta/avatar';
 
 
<PreviewContainer >
      <Avatar className="border-none"  fallback="AH" src="https://i.pravatar.cc/120" alt="@shadcn" />
      <Avatar className="bg-gray-500"  fallback="AH" src="https://i.pravatar.cc/120" alt="@shadcn" />
      <Avatar className="bg-amber-500 h-[120px] w-[120px] rounded-[12px]" fallback="AH"  src="" alt="@shadcn" />
</PreviewContainer>

Composition

If more control is needed follow the Composition Pattern.

import { Avatar, AvatarRoot, AvatarFallback } from '@volta/avatar';
 
 
<div className="preview mt-4 flex justify-center items-center p-10 w-full border border-slate-200 rounded-xl gap-4">
    <AvatarRoot
      src="https://i.pravatar.cc/150"
      alt="dsdds"
      className="p-12 bg-lime-400 border-spacing-4 border-xl border-lime-500 rounded-2xl"
    >
      <AvatarFallback className="font-bold text-4xl text-lime-600">
        XX
      </AvatarFallback>
    </AvatarRoot>
</div>

Properties

Avatar Props

The following props are available for avatar component. These are the custom props that we've added for the avatar component and you can use all the other native props as well.

Attribute	Type	Description	Default
`size`	Size	Change avatar size	`md`
`className`	`string`	Add custom className for avatar	`''`
`color`	`enumn`	Change color	`'primary'`
`src`	`string`	Image url	`''`

AvatarRoot Props

The following props are available for AvatarRoot component. These are the custom props that we've added for the avatar component and you can use all the other native props as well.

Attribute	Type	Description	Default
`size`	Size	Change avatar size	`md`
`className`	`string`	Add custom className for avatar	`''`
`color`	`enumn`	Add custom className for avatar	`'primary'`
`delayMS`	`number`	delay in MS to display Fallback	`400`
`src`	`enumn`	Add custom className for avatar	`'primary'`

AvatarImage Props

The following props are available for AvatarImage component. These are the custom props that we've added for the avatar component and you can use all the other native props as well.

Attribute	Type	Description	Default
`src`	'string'	Change avatar size	`md`
`alt`	`string`	Add custom className for avatar	`''`

AvatarFallback Props

The following props are available for AvatarFallback component. These are the custom props that we've added for the avatar component and you can use all the other native props as well.

Attribute	Type	Description	Default
`size`	Size	Change avatar size	`md`
`className`	`string`	Add custom className for avatar	`''`
`color`	`enumn`	Add custom className for avatar	`'primary'`

Aspectratio Badge