Avatar

Stable

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

<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

<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

<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.

<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

<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

Name	Type	Description
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.