Avatar

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-vue/avatar
Copy

Usage#

Copy<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
</script>
 
<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>

Composition#

Use the following composition to build an Avatar:

CopyAvatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Use the following composition to build an AvatarGroup:

CopyAvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Examples#

Basic#

A basic avatar component with an image and a fallback.

Badge#

Use the AvatarBadge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.

Use the class prop to add custom styles to the badge such as custom colors, sizes, etc.

Copy<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge class="bg-green-600 dark:bg-green-800" />
</Avatar>

Badge with Icon#

You can also use an icon inside <AvatarBadge>.

Avatar Group#

Use the AvatarGroup component to add a group of avatars.

Avatar Group Count#

Use <AvatarGroupCount> to add a count to the group.

Avatar Group with Icon#

You can also use an icon inside <AvatarGroupCount>.

Sizes#

Use the size prop to change the size of the avatar.

Dropdown#

You can use the Avatar component as a trigger for a dropdown menu.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

Avatar#

The Avatar component is the root component that wraps the avatar image and fallback.

AvatarImage#

The AvatarImage component displays the avatar image.

AvatarFallback#

The AvatarFallback component displays a fallback when the image fails to load.

AvatarBadge#

The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

AvatarGroup#

The AvatarGroup component displays a group of avatars with overlapping styling.

AvatarGroupCount#

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.