Avatar

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

Examples

Shape

The Avatar component creates an image within its shape.

Code

<script setup lang="ts">
import { BaseAvatar } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAvatar" src="https://placehold.co/150" shape="circle" name="John Doe" />
    <component :is="BaseAvatar" src="https://placehold.co/150" shape="square" name="John Doe" />
    <component :is="BaseAvatar" src="https://placehold.co/150" shape="squircle" name="John Doe" />
  </div>
</template>

Initial

In the absence of a image, you can use the initial. Initials can be used in various variants.

Code

<script setup lang="ts">
import { BaseAvatar } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAvatar" name="John" />
    <component :is="BaseAvatar" name="John Doe" />
    <component :is="BaseAvatar" name="John Doe Rock" />
  </div>
</template>

Color

In the absence of a image, you can use the initial.

Code

<script setup lang="ts">
import { BaseAvatar } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAvatar" color="primary" name="John Doe" />
    <component :is="BaseAvatar" color="secondary" name="John Doe" />
    <component :is="BaseAvatar" color="info" name="John Doe" />
    <component :is="BaseAvatar" color="success" name="John Doe" />
    <component :is="BaseAvatar" color="warning" name="John Doe" />
    <component :is="BaseAvatar" color="danger" name="John Doe" />
  </div>
</template>

Indicator

Avatars can be a dot attached to it. It can be used to indicate the user status.

Code

<script setup lang="ts">
import { BaseAvatar } from '@point-hub/papp'
</script>

<template>
  <component
    :is="BaseAvatar"
    src="https://placehold.co/150"
    name="John Doe"
    indicator
    colorIndicator="primary"
  />
  <component
    :is="BaseAvatar"
    src="https://placehold.co/150"
    name="John Doe"
    indicator
    colorIndicator="secondary"
  />
  <component
    :is="BaseAvatar"
    src="https://placehold.co/150"
    name="John Doe"
    indicator
    colorIndicator="info"
  />
  <component
    :is="BaseAvatar"
    src="https://placehold.co/150"
    name="John Doe"
    indicator
    colorIndicator="success"
  />
  <component
    :is="BaseAvatar"
    src="https://placehold.co/150"
    name="John Doe"
    indicator
    colorIndicator="warning"
  />
  <component
    :is="BaseAvatar"
    src="https://placehold.co/150"
    name="John Doe"
    indicator
    colorIndicator="danger"
  />
</template>

Size

The Avatar component can have various size.

Code

<script setup lang="ts">
import { BaseAvatar } from '@point-hub/papp'
</script>

<template>
  <div>
    <component
      :is="BaseAvatar"
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="2xl"
    />
    <component
      :is="BaseAvatar"
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="xl"
    />
    <component
      :is="BaseAvatar"
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="lg"
    />
    <component
      :is="BaseAvatar"
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="md"
    />
    <component
      :is="BaseAvatar"
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="sm"
    />
    <component
      :is="BaseAvatar"
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="xs"
    />
  </div>
</template>

Group

The Avatar group renders its children as a stack.

Code

<script setup lang="ts">
import { BaseAvatar, BaseAvatarGroup } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAvatarGroup" />
      <component :is="BaseAvatar" src="https://placehold.co/150" name="John Doe" />
      <component :is="BaseAvatar" src="https://placehold.co/150" name="John Doe" />
      <component :is="BaseAvatar" src="https://placehold.co/150" name="John Doe" />
      <component
        :is="BaseAvatar"
        src="https://placehold.co/150"
        name="John Doe"
        colorIndicator="danger"
      />
    </component>
  </div>
</template>

Animate

Hover the Avatar to activate slide animation.

Code

<script setup lang="ts">
import { BaseAvatar } from '@point-hub/papp'
</script>

<template>
  <div>
    <component :is="BaseAvatarGroup" />
      <component :is="BaseAvatar" src="https://placehold.co/150" name="John Doe" animate />
      <component :is="BaseAvatar" src="https://placehold.co/150" name="John Doe" animate />
      <component :is="BaseAvatar" src="https://placehold.co/150" name="John Doe" animate />
      <component
        :is="BaseAvatar"
        src="https://placehold.co/150"
        name="John Doe"
        animate
        colorIndicator="danger"
      />
    </component>
  </div>
</template>

Avatar Group API

Slot

#default slot for rendering avatars

Avatar API

Types

export type BaseAvatarColorType =
  | 'primary'
  | 'secondary'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'
export type BaseAvatarShapeType = 'square' | 'squircle' | 'circle'
export type BaseAvatarSizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

Props

Name	Type	Default	Description
name	string		Avatar name is required.
src	string		Avatar image source file.
color	primary secondary info success warning danger	secondary	Avatar color.
size	xs sm base lg xl 2xl	base	Avatar size.
shape	square circle squircle	circle	Avatar shape.
indicator	boolean	false	Avatar indicator.
colorIndicator	primary secondary info success warning danger	success	Avatar color indicator.