Avatar

Usage

EGSC

import { Avatar, AvatarFallback, AvatarImage } from '@jamie/ui/avatar'
 
export function AvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar>
        <AvatarImage src="https://github.com/espj.png" alt="Egor" />
        <AvatarFallback>EG</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>
    </div>
  )
}

Sizes

Avatars come in three sizes: sm, default, and lg.

SMDFLG

import { Avatar, AvatarFallback, AvatarImage } from '@jamie/ui/avatar'
 
export function AvatarSizesDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="sm">
        <AvatarImage src="https://github.com/espj.png" alt="Small" />
        <AvatarFallback>SM</AvatarFallback>
      </Avatar>
      <Avatar size="default">
        <AvatarImage src="https://github.com/espj.png" alt="Default" />
        <AvatarFallback>DF</AvatarFallback>
      </Avatar>
      <Avatar size="lg">
        <AvatarImage src="https://github.com/espj.png" alt="Large" />
        <AvatarFallback>LG</AvatarFallback>
      </Avatar>
    </div>
  )
}

With Badge

Use AvatarBadge to display a status indicator on an avatar.

EGRDSC

import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from '@jamie/ui/avatar'
 
export function AvatarBadgeDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar size="sm">
        <AvatarImage src="https://github.com/espj.png" alt="Egor" />
        <AvatarFallback>EG</AvatarFallback>
        <AvatarBadge />
      </Avatar>
      <Avatar size="default">
        <AvatarImage src="https://github.com/rudro-jamie.png" alt="Rudro" />
        <AvatarFallback>RD</AvatarFallback>
        <AvatarBadge />
      </Avatar>
      <Avatar size="lg">
        <AvatarFallback>SC</AvatarFallback>
        <AvatarBadge />
      </Avatar>
    </div>
  )
}

Group

Use AvatarGroup to stack multiple avatars together with AvatarGroupCount for overflow.

EGRDSC

import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
  AvatarImage
} from '@jamie/ui/avatar'
 
export function AvatarGroupDemo() {
  return (
    <AvatarGroup>
      <Avatar>
        <AvatarImage src="https://github.com/espj.png" alt="Egor" />
        <AvatarFallback>EG</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarImage src="https://github.com/rudro-jamie.png" alt="Rudro" />
        <AvatarFallback>RD</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>
      <AvatarGroupCount>+3</AvatarGroupCount>
    </AvatarGroup>
  )
}