Avatar

An alternative image element for user representation.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/avatar

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  AvatarRoot,
  AvatarImg,
  AvatarGroup,
  AvatarGroupContent,
  AvatarExtra,
} from '@melio-ui/avatar';

AvatarRoot: All parts of the avatar are included.
AvatarImg: The image to render. By default, it will only be rendered when loaded.
AvatarGroup: It is a wrapper that stacks multiple avatars together.
AvatarGroupContent: When using AvatarGroup, an avatar component is included.
AvatarExtra: When using AvatarGroup, extra space above the maximum number of avatars is displayed.

Another way to import

'use client';

import { Avatar } from '@melio-ui/avatar';

<Avatar.Root>
  <Avatar.Img />
</Avatar.Root>;

'use client' must be used when rendering on the server side.

API Reference

AvatarRoot

All parts of the avatar are included.

AvatarImg

The image to render. By default, it will only be rendered when loaded.

Prop	Type	Default	Description
src	`string`	-	The src attribute of the img element.
srcSet	`string`	-	The srcset attribute of the img element.
sizes	`string`	-	The sizes attribute of the img element.
alt	`string`	-	The alt attribute of the img element.
crossOrigin	`"anonymous" \| "use-credentials" \| ""`	-	The crossorigin attribute of the img element.
referrerPolicy	`React.HTMLAttributeReferrerPolicy`	-	The referrerpolicy attribute of the img element.

AvatarGroup

It is a wrapper that stacks multiple avatars together.

Prop	Type	Default	Description
max	`number`	5	The maximum number of avatars that can be displayed.

AvatarGroupContent

When using AvatarGroup, an avatar component is included.

AvatarExtra

When using AvatarGroup, extra space above the maximum number of avatars is displayed.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Examples

Loading the image.

<AvatarRoot>
  <AvatarImg src="http://bit.ly/3XZx3ZU" />
</AvatarRoot>

Grouping

<AvatarGroup>
  <AvatarGroupContent>
    <AvatarRoot>
      <UserIcon />
    </AvatarRoot>
    <AvatarRoot>
      <UserIcon />
    </AvatarRoot>
    <AvatarRoot>
      <UserIcon />
    </AvatarRoot>
  </AvatarGroupContent>
</AvatarGroup>

Setting the maximum value

<AvatarGroup max={2}>
  <AvatarGroupContent>
    <AvatarRoot>
      <UserIcon />
    </AvatarRoot>
    <AvatarRoot>
      <UserIcon />
    </AvatarRoot>
    <AvatarRoot>
      <UserIcon />
    </AvatarRoot>
  </AvatarGroupContent>
  <AvatarExtra />
</AvatarGroup>

Alert

Badge