Avatar

An image element with a fallback for representing the user.

Usage

<template>
  <PAvatar src="https://github.com/praburangki.png" />
</template>

You can pass any property from the HTML <img> element such as alt, loading, etc.

To opt-out of @nuxt/image, use the as prop: :as="{ img: 'img' }".

Src

Use the src prop to set the image URL.

src

<template>
  <PAvatar src="https://github.com/praburangki.png" />
</template>

Size

Use the size prop to set the size of the Avatar.

size

<template>
  <PAvatar src="https://github.com/praburangki.png" size="xl" />
</template>

The <img> element's width and height are automatically set based on the size prop.

Icon

Use the icon prop to display a fallback Icon.

icon

size

<template>
  <PAvatar icon="i-lucide:image" size="md" />
</template>

Text

Use the text prop to display a fallback text.

text

size

<template>
  <PAvatar text="+1" size="md" />
</template>

Alt

When no icon or text is provided, the initials of the alt prop is used as fallback.

alt

size

<template>
  <PAvatar alt="bebedag" size="md" />
</template>

The alt prop is passed to the img element as the alt attribute.

Chip

Use the chip prop to display a chip around the Avatar.

<template>
  <PAvatar
    src="https://github.com/praburangki.png"
    :chip="{
      inset: true
    }"
  />
</template>

Examples

You can use a Tooltip component to display a tooltip when hovering the Avatar.

<script setup lang="ts">
import { PAvatar, PTooltip } from '#components';
</script>

<template>
  <PTooltip text="praburangki">
    <PAvatar
      src="https://github.com/praburangki.png"
      alt="praburangki"
    />
  </PTooltip>
</template>

With mask

You can use a CSS mask to display an Avatar with a custom shape instead of a simple circle.

<script setup lang="ts">
import { PAvatar } from '#components';
</script>

<template>
  <PAvatar
    class="squircle rounded-none"
    src="https://github.com/praburangki.png"
    alt="praburangki"
  />
</template>

<style>
.squircle {
  mask-image: url("data:image/svg+xml,%3csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M100 0C20 0 0 20 0 100s20 100 100 100 100-20 100-100S180 0 100 0Z'/%3e%3c/svg%3e");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
}
</style>

API

Props

Prop	Default	Type
`as`	`'span'`	`any` The element or component this component should render as.
`icon`		`string \| object`
`loading`		`"eager" \| "lazy"`
`referrerpolicy`		`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`
`size`	`'md'`	`"md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
`chip`		`boolean \| PChipProps`
`text`		`string`
`alt`		`string`
`crossorigin`		`"" \| "anonymous" \| "use-credentials"`
`decoding`		`"async" \| "auto" \| "sync"`
`height`		`string \| number`
`sizes`		`string`
`src`		`string`
`srcset`		`string`
`usemap`		`string`
`width`		`string \| number`
`pohon`		`{ root?: ClassValue; image?: ClassValue; fallback?: ClassValue; icon?: ClassValue; }`

This component also supports all native <img> HTML attributes.

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PAvatar. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    avatar: {
      slots: {
        root: '',
        image: '',
        fallback: '',
        icon: ''
      },
      variants: {
        size: {
          '3xs': {
            root: ''
          },
          '2xs': {
            root: ''
          },
          xs: {
            root: ''
          },
          sm: {
            root: ''
          },
          md: {
            root: ''
          },
          lg: {
            root: ''
          },
          xl: {
            root: ''
          },
          '2xl': {
            root: ''
          },
          '3xl': {
            root: ''
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    avatar: {
      slots: {
        root: '',
        image: '',
        fallback: '',
        icon: ''
      },
      variants: {
        size: {
          '3xs': {
            root: ''
          },
          '2xs': {
            root: ''
          },
          xs: {
            root: ''
          },
          sm: {
            root: ''
          },
          md: {
            root: ''
          },
          lg: {
            root: ''
          },
          xl: {
            root: ''
          },
          '2xl': {
            root: ''
          },
          '3xl': {
            root: ''
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

Alert

A callout to draw user's attention.

AvatarGroup

Stack multiple avatars in a group.