Skip to content

Avatar ​

Stable

Display the user's profile image or show user initials in a circular shape when no image is available.

vue
<script setup lang="ts">
import { HAvatar, AVATAR_SIZES } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HAvatar
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
    />
  </div>
</template>

Examples ​

Shapes ​

vue
<script setup lang="ts">
import { HAvatar, AVATAR_SIZES } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HAvatar
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
    />

    <HAvatar
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
      shape="square"
    />
  </div>
</template>

With Image ​

vue
<script setup lang="ts">
import { HAvatar, AVATAR_SIZES } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HAvatar
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
      image="https://avatars.slack-edge.com/2023-12-12/6334464122773_2329a6293a6184549150_72.png"
    />
  </div>
</template>

With Name or Initials ​

When an image is not available, we can display user initials by specify either name or initials props. If both are specified, initials will be used as characters and name will be used as tooltip text.

vue
<script setup lang="ts">
import { HAvatar } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HAvatar
      size="sm"
      name="Design System"
    />

    <HAvatar
      size="md"
      initials="DS"
    />

    <HAvatar
      size="lg"
      name="Design System"
      initials="DS"
    />

    <HAvatar
      size="xl"
      name="A name that doesn't follow its initials"
      initials="DS"
    />
  </div>
</template>

With Badge ​

vue
<script setup lang="ts">
import { HAvatar, AVATAR_SIZES } from '@holistics/design-system'
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HAvatar
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
      badge="sm"
    />

    <HAvatar
      v-for="size in AVATAR_SIZES"
      :key="size"
      :size="size"
      badge="lg"
    />
  </div>
</template>

API ​

Pass-through ​

  • Always be tag if specified
  • Else, if to is specified: <RouterLink>
  • Else, if href is specified: <a>
  • Otherwise, <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props ​

NameTypeDescription
size *
"sm" | "md" | "lg" | "xl"
shape 
"round" | "square"
= AVATAR_SHAPES[0]
tag 
string

The HTML tag for the Avatar component.

image 
string

The url of the image for the avatar

name 
string
initials 
string

This is placeholder when an avatar image is not available or while it's loading.

badge 
"sm" | "lg"

The badge size for the avatar.

href 
string

Hyperlink reference for the avatar. Will open this URL on click.

target 
HTMLAttributeTarget

The target attribute specifies where to open the linked document. Usually use with href.

to 
string

A string representing a path or route.

replace 
boolean

Specifies whether or not the history should be replaced. Usually use with to.