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

<template>
  <div>
    <base-avatar src="https://placehold.co/150" shape="circle" name="John Doe" />
    <base-avatar src="https://placehold.co/150" shape="square" name="John Doe" />
    <base-avatar 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

<template>
  <div>
    <base-avatar name="John" />
    <base-avatar name="John Doe" />
    <base-avatar name="John Doe Rock" />
  </div>
</template>

Color

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

Code

<template>
  <div>
    <base-avatar color="primary" name="John Doe" />
    <base-avatar color="secondary" name="John Doe" />
    <base-avatar color="info" name="John Doe" />
    <base-avatar color="success" name="John Doe" />
    <base-avatar color="warning" name="John Doe" />
    <base-avatar 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

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

Size

The Avatar component can have various size.

Code

<template>
  <div>
    <base-avatar indicator src="https://placehold.co/150" shape="circle" name="John Doe" :size="128" />
    <base-avatar indicator src="https://placehold.co/150" shape="circle" name="John Doe" :size="96" />
    <base-avatar indicator src="https://placehold.co/150" shape="circle" name="John Doe" :size="64" />
    <base-avatar indicator src="https://placehold.co/150" shape="circle" name="John Doe" :size="48" />
    <base-avatar indicator src="https://placehold.co/150" shape="circle" name="John Doe" :size="32" />
  </div>
</template>

Group

The Avatar group renders its children as a stack.

Code

<template>
  <div>
    <base-avatar-group>
      <base-avatar src="https://placehold.co/150" />
      <base-avatar src="https://placehold.co/150" />
      <base-avatar src="https://placehold.co/150" />
      <base-avatar src="https://placehold.co/150" />
    </base-avatar-group>
  </div>
</template>

Animate

Hover the Avatar to activate slide animation.

Code

<template>
  <div>
    <base-avatar-group>
      <base-avatar src="https://placehold.co/150" animate indicator />
      <base-avatar src="https://placehold.co/150" animate indicator />
      <base-avatar src="https://placehold.co/150" animate indicator />
      <base-avatar src="https://placehold.co/150" animate indicator />
    </base-avatar-group>
  </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'

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