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="2xl"
    />
    <base-avatar
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="xl"
    />
    <base-avatar
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="lg"
    />
    <base-avatar
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="md"
    />
    <base-avatar
      indicator
      src="https://placehold.co/150"
      shape="circle"
      name="John Doe"
      size="sm"
    />
    <base-avatar
      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

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