Usage

import { Avatar } from '@pillar-ui/core'

<Avatar />

Examples

Title

A required title for the alt to make the avatar accessible.

import { Avatar } from '@pillar-ui/core'

export const AvatarTitle = () => {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/60?img=40" title="User X's profile picture" />
    </>
  )
}

Src

import { Avatar } from '@pillar-ui/core'

export const AvatarImage = () => {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/120?img=1" title="Success!" />
      <Avatar src="https://i.pravatar.cc/120?img=2" title="Success!" />
      <Avatar src="https://i.pravatar.cc/120?img=3" title="Success!" />
      <Avatar src="https://i.pravatar.cc/120?img=4" title="Success!" />
      <Avatar src="https://i.pravatar.cc/120?img=5" title="Success!" />
      <Avatar src="https://i.pravatar.cc/120?img=6" title="Success!" />
    </>
  )
}

Color

Default

p

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Avatar } from '@pillar-ui/core'

export const AvatarColor = () => {
  return (
    <>
      <Avatar title="John Doe" />
      <Avatar color="d" title="John Doe" />
      <Avatar color="su" title="John Doe" />
      <Avatar color="w" title="John Doe" />
      <Avatar color="se" title="John Doe" />
      <Avatar color="p" title="John Doe" />
      <Avatar color="b" title="John Doe" />
      <Avatar color="o" title="John Doe" />
      <Avatar color="i" title="John Doe" />
    </>
  )
}

Size

Default

5

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Avatar } from '@pillar-ui/core'

export const AvatarSize = () => {
  return (
    <>
      <Avatar src="https://i.pravatar.cc/120?img=11" size="1" />
      <Avatar src="https://i.pravatar.cc/120?img=12" size="2" />
      <Avatar src="https://i.pravatar.cc/120?img=13" size="3" />
      <Avatar src="https://i.pravatar.cc/120?img=13" size="4" />
      <Avatar src="https://i.pravatar.cc/120?img=14" size="5" />
      <Avatar src="https://i.pravatar.cc/120?img=15" size="6" />
      <Avatar src="https://i.pravatar.cc/120?img=16" size="7" />
      <Avatar src="https://i.pravatar.cc/120?img=17" size="8" />
      <Avatar src="https://i.pravatar.cc/120?img=18" size="9" />
    </>
  )
}

Corner

Default

full

Type

'0' | '1' | '2' | '3' | '4' | '5' | 'full' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'b1' | 'b2' | 'b3' | 'b4' | 'b5'

import { Avatar } from '@pillar-ui/core'

const shared = {
  src: 'https://i.pravatar.cc/120?img=11',
  title: 'Hello',
}
export const AvatarCorner = () => {
  return (
    <>
      <Avatar corner="0" {...shared} />
      <Avatar corner="1" {...shared} />
      <Avatar corner="2" {...shared} />
      <Avatar corner="3" {...shared} />
      <Avatar corner="4" {...shared} />
      <Avatar corner="5" {...shared} />
      <Avatar corner="full" {...shared} />
      <Avatar corner="b1" {...shared} />
      <Avatar corner="b2" {...shared} />
      <Avatar corner="b3" {...shared} />
      <Avatar corner="b4" {...shared} />
      <Avatar corner="b5" {...shared} />
      <Avatar corner="h1" {...shared} />
      <Avatar corner="h2" {...shared} />
      <Avatar corner="h3" {...shared} />
      <Avatar corner="h4" {...shared} />
      <Avatar corner="h5" {...shared} />
      <Avatar corner="h6" {...shared} />
    </>
  )
}

Variant

Default

soft

Type

'solid' | 'outline' | 'soft' | 'dashed'

import { Avatar, Flex } from '@pillar-ui/core'

const shared = {
  src: 'https://i.pravatar.cc/60?img=12',
  title: 'Hello',
}
export const AvatarVariant = () => {
  return (
    <>
      <Flex gap="2">
        <Avatar variant="solid" {...shared} />
        <Avatar variant="soft" {...shared} />
        <Avatar variant="outline" {...shared} />
        <Avatar variant="dashed" {...shared} />
      </Flex>
      <Flex gap="2">
        <Avatar variant="solid" {...shared} corner="b2" />
        <Avatar variant="soft" {...shared} corner="b2" />
        <Avatar variant="outline" {...shared} corner="b2" />
        <Avatar variant="dashed" {...shared} corner="b2" />
      </Flex>
    </>
  )
}

Animate

Default

-

Type

import { Avatar } from '@pillar-ui/core'

const shared = {
  src: 'https://i.pravatar.cc/60?img=13',
  title: 'Hello',
}

export const AvatarAnimate = () => {
  return (
    <>
      <Avatar {...shared} animate="zoom" />
      <Avatar {...shared} animate="jump-x" />
      <Avatar {...shared} animate="jump-y" />
      <Avatar {...shared} animate="jump--y" />
      <Avatar {...shared} animate="jump--x" />
      <Avatar {...shared} animate="zoom-in" />
    </>
  )
}

Fallback

The fallback prop is used to display a fallback if the main image cannot be loaded or encountered an error.

The image file is not found. Make sure the image file is in the same directory as the HTML file, or that you have provided the correct path to the image file.
The image file is corrupt. Try downloading the image file again.
The image file is too large. Some web servers have a maximum file size limit for images. If your image file is too large, try resizing it or using a different image file format.
The image file is not a supported format. Some web servers only support certain image file formats, such as JPEG, PNG, and GIF. If your image file is not in one of these formats, try converting it to a supported format.
The image file is blocked by the browser's security settings. Some browsers block images from certain websites. If you are seeing a message that says "Image is blocked," try clearing your browser's cache and cookies.

HL

4K

import { Avatar } from '@pillar-ui/core'
import { Users } from '@pillar-ui/icons'

export const AvatarFallback = () => {
  return (
    <>
      <Avatar fallback="HL" />
      <Avatar fallback={<Users />} />
      <Avatar fallback="4K" />
    </>
  )
}

Avatar Group

limit

3+

import { Avatar, AvatarGroup } from '@pillar-ui/core'

const Avatars = ({ start = 1, count = 8 }: { start?: number; count?: number }) => {
  return Array.from({ length: count }, (_, i) => (
    <Avatar src={`https://i.pravatar.cc/120?img=${i + start}`} title="Hello" />
  ))
}

export const AvatarGroupLimit = () => {
  return (
    <>
      <AvatarGroup limit={5}>
        <Avatars />
      </AvatarGroup>
      <AvatarGroup limit={5}>
        <Avatars start={8} count={5} />
      </AvatarGroup>
      <AvatarGroup limit={5}>
        <Avatars start={13} count={3} />
      </AvatarGroup>
    </>
  )
}

layout

Default

stack

Type

'stack' | 'grid'

import { Avatar, AvatarGroup } from '@pillar-ui/core'

const Avatars = ({ start = 1, count = 8 }: { start?: number; count?: number }) => {
  return Array.from({ length: count }, (_, i) => (
    <Avatar src={`https://i.pravatar.cc/120?img=${i + start}`} title="Hello" />
  ))
}

export const AvatarGroupStack = () => {
  return (
    <>
      <AvatarGroup layout="stack">
        <Avatars />
      </AvatarGroup>
      <AvatarGroup layout="grid">
        <Avatars start={20} />
      </AvatarGroup>
    </>
  )
}

Group Animate

Default

zoom

Type

'zoom' | 'jump-y' | 'jump-x'

import { Avatar, AvatarGroup } from '@pillar-ui/core'

export function AvatarGroupAnimation() {
  return (
    <>
      <AvatarGroup animate="jump-y">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup animate="jump--y">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup animate="jump-x">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup animate="jump--x">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup animate="zoom">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup animate="zoom-in">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
    </>
  )
}

Context Props

The AvatarGroup component can be used to group multiple Avatar components together, and set common props such as color, corner, size, and variant for all the avatars in the group, instead of repeating them for each individual Avatar. This can help reduce repetition in your code and make it more efficient.

import { Avatar, AvatarGroup } from '@pillar-ui/core'

export function AvatarGroupContext() {
  return (
    <>
      <AvatarGroup variant="outline">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup size="3">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup corner="0">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup color="d">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
      <AvatarGroup animate="jump-x">
        <Avatar title="Success!" />
        <Avatar title="Success!" />
        <Avatar title="Success!" />
      </AvatarGroup>
    </>
  )
}

Customizing Appearance

Our design system uses CSS variables to set default styles for components. You can customize these variables to change the overall look of your component accross your project.

Available Properties:

/* Change the default corner of the Avatar */
--avatar-rad:;
/* Change the default size of the Avatar */
--avatar-size:;