Avatar

<afp-avatar>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

An avatar component to display user profile images with initials fallback.

<afp-avatar></afp-avatar>

<afp-avatar></afp-avatar>

<AfpAvatar></AfpAvatar>

<AfpAvatar></AfpAvatar>

Examples #

Variants #

The avatar component supports different variants using the variant attribute.

<div class="afp-cluster afp-align-center">
  <afp-avatar variant="neutral"></afp-avatar>
  <afp-avatar variant="brand"></afp-avatar>
  <afp-avatar variant="accent"></afp-avatar>
  <afp-avatar variant="info"></afp-avatar>
  <afp-avatar variant="error"></afp-avatar>
  <afp-avatar variant="success"></afp-avatar>
  <afp-avatar variant="warning"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <afp-avatar [variant]="'neutral'"></afp-avatar>
  <afp-avatar [variant]="'brand'"></afp-avatar>
  <afp-avatar [variant]="'accent'"></afp-avatar>
  <afp-avatar [variant]="'info'"></afp-avatar>
  <afp-avatar [variant]="'error'"></afp-avatar>
  <afp-avatar [variant]="'success'"></afp-avatar>
  <afp-avatar [variant]="'warning'"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar variant="neutral"></AfpAvatar>
  <AfpAvatar variant="brand"></AfpAvatar>
  <AfpAvatar variant="accent"></AfpAvatar>
  <AfpAvatar variant="info"></AfpAvatar>
  <AfpAvatar variant="error"></AfpAvatar>
  <AfpAvatar variant="success"></AfpAvatar>
  <AfpAvatar variant="warning"></AfpAvatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar :variant="'neutral'"></AfpAvatar>
  <AfpAvatar :variant="'brand'"></AfpAvatar>
  <AfpAvatar :variant="'accent'"></AfpAvatar>
  <AfpAvatar :variant="'info'"></AfpAvatar>
  <AfpAvatar :variant="'error'"></AfpAvatar>
  <AfpAvatar :variant="'success'"></AfpAvatar>
  <AfpAvatar :variant="'warning'"></AfpAvatar>
</div>

Shapes #

use the shape attribute to change avatar's shape.

<div class="afp-cluster afp-align-center">
  <afp-avatar shape="pill"></afp-avatar>
  <afp-avatar shape="rounded"></afp-avatar>
  <afp-avatar shape="soft"></afp-avatar>
  <afp-avatar shape="square"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <afp-avatar [shape]="'pill'"></afp-avatar>
  <afp-avatar [shape]="'rounded'"></afp-avatar>
  <afp-avatar [shape]="'soft'"></afp-avatar>
  <afp-avatar [shape]="'square'"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar shape="pill"></AfpAvatar>
  <AfpAvatar shape="rounded"></AfpAvatar>
  <AfpAvatar shape="soft"></AfpAvatar>
  <AfpAvatar shape="square"></AfpAvatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar :shape="'pill'"></AfpAvatar>
  <AfpAvatar :shape="'rounded'"></AfpAvatar>
  <AfpAvatar :shape="'soft'"></AfpAvatar>
  <AfpAvatar :shape="'square'"></AfpAvatar>
</div>

Sizes #

Use the size attribute to change an avatar's size.

<div class="afp-cluster afp-align-center">
  <afp-avatar size="small"></afp-avatar>
  <afp-avatar size="medium"></afp-avatar>
  <afp-avatar size="large"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <afp-avatar [size]="'small'"></afp-avatar>
  <afp-avatar [size]="'medium'"></afp-avatar>
  <afp-avatar [size]="'large'"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar size="small"></AfpAvatar>
  <AfpAvatar size="medium"></AfpAvatar>
  <AfpAvatar size="large"></AfpAvatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar :size="'small'"></AfpAvatar>
  <AfpAvatar :size="'medium'"></AfpAvatar>
  <AfpAvatar :size="'large'"></AfpAvatar>
</div>

Images #

Display an avatar with a custom image using the image attribute.

<div class="afp-cluster afp-align-center">
  <afp-avatar shape="pill" image="https://picsum.photos/100"></afp-avatar>
  <afp-avatar shape="rounded" image="https://picsum.photos/110"></afp-avatar>
  <afp-avatar shape="soft" image="https://picsum.photos/120"></afp-avatar>
  <afp-avatar shape="square" image="https://picsum.photos/130"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <afp-avatar [shape]="'pill'" [image]="'https://picsum.photos/100'"></afp-avatar>
  <afp-avatar [shape]="'rounded'" [image]="'https://picsum.photos/110'"></afp-avatar>
  <afp-avatar [shape]="'soft'" [image]="'https://picsum.photos/120'"></afp-avatar>
  <afp-avatar [shape]="'square'" [image]="'https://picsum.photos/130'"></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar shape="pill" image="https://picsum.photos/100"></AfpAvatar>
  <AfpAvatar shape="rounded" image="https://picsum.photos/110"></AfpAvatar>
  <AfpAvatar shape="soft" image="https://picsum.photos/120"></AfpAvatar>
  <AfpAvatar shape="square" image="https://picsum.photos/130"></AfpAvatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar :shape="'pill'" :image="'https://picsum.photos/100'"></AfpAvatar>
  <AfpAvatar :shape="'rounded'" :image="'https://picsum.photos/110'"></AfpAvatar>
  <AfpAvatar :shape="'soft'" :image="'https://picsum.photos/120'"></AfpAvatar>
  <AfpAvatar :shape="'square'" :image="'https://picsum.photos/130'"></AfpAvatar>
</div>

Initials #

Display an avatar with user initials using the name attribute.

<afp-avatar name="John Doe"></afp-avatar>

<afp-avatar [name]="'John Doe'"></afp-avatar>

<AfpAvatar name="John Doe"></AfpAvatar>

<AfpAvatar :name="'John Doe'"></AfpAvatar>

Custom Default Icon #

Use the icon slot within the avatar to display custom default icons.

<afp-avatar>
  <afp-icon slot="icon" name="emoji-sunglasses-fill"></afp-icon>
</afp-avatar>

<afp-avatar>
  <afp-icon [slot]="'icon'" [name]="'emoji-sunglasses-fill'"></afp-icon>
</afp-avatar>

<AfpAvatar>
  <AfpIcon slot="icon" name="emoji-sunglasses-fill"></AfpIcon>
</AfpAvatar>

<AfpAvatar>
  <AfpIcon :slot="'icon'" :name="'emoji-sunglasses-fill'"></AfpIcon>
</AfpAvatar>

Add a tooltip using the title attribute.

<afp-avatar title="John Doe"></afp-avatar>

<afp-avatar [title]="'John Doe'"></afp-avatar>

<AfpAvatar title="John Doe"></AfpAvatar>

<AfpAvatar :title="'John Doe'"></AfpAvatar>

Disabled #

Disable an avatar using the disabled attribute.

<div class="afp-cluster afp-align-center">
  <afp-avatar shape="pill" disabled></afp-avatar>
  <afp-avatar shape="rounded" disabled></afp-avatar>
  <afp-avatar shape="soft" disabled></afp-avatar>
  <afp-avatar shape="square" disabled></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <afp-avatar [shape]="'pill'" disabled></afp-avatar>
  <afp-avatar [shape]="'rounded'" disabled></afp-avatar>
  <afp-avatar [shape]="'soft'" disabled></afp-avatar>
  <afp-avatar [shape]="'square'" disabled></afp-avatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar shape="pill" disabled></AfpAvatar>
  <AfpAvatar shape="rounded" disabled></AfpAvatar>
  <AfpAvatar shape="soft" disabled></AfpAvatar>
  <AfpAvatar shape="square" disabled></AfpAvatar>
</div>

<div class="afp-cluster afp-align-center">
  <AfpAvatar :shape="'pill'" disabled></AfpAvatar>
  <AfpAvatar :shape="'rounded'" disabled></AfpAvatar>
  <AfpAvatar :shape="'soft'" disabled></AfpAvatar>
  <AfpAvatar :shape="'square'" disabled></AfpAvatar>
</div>

Properties

Learn more about properties.

Name Description Reflects

image

The URL of the image to be displayed inside the avatar.

Type string

name

A placeholder for initials when no image is available. Initials are generated based on the name assigned to this property, typically limited to 1–2 characters for best readability.

Type string

shape

shape of the avatar

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.CIRCLE

variant

variant of avatar (color/appearance)

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

Default AfpVariant.NEUTRAL

size

size of the avatar

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

disabled

Disabled property of avatar.

Type boolean

label

A label that describes the avatar for assistive devices.

Type string

title

The title of a browser-specific tooltip when provided.

Type string

Slots

Learn more about slots.

Name	Description
`icon`	The default icon slot when no image or initials are provided.

Internationalization

Learn more about internationalization.

Key	Description
`avatar.aria-label`	The default `aria-label` text for Avatar
`avatar.img.alt`	The default image `alt` text for Avatar

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The avatar element wrapper.	`::part(base)`
`image`	The image element when an image is provided.	`::part(image)`
`initials`	The initials container when image is not provided.	`::part(initials)`
`default-icon`	The default icon when no image or initials are provided.	`::part(default-icon)`

CSS Custom Properties

Name	Description	Default
`--afp-avatar-disabled-opacity`	The opacity of the avatar when disabled.	`0.5`
`--afp-avatar-border-color`	The border color of the avatar.	`--afp-color-body`
`--afp-avatar-border-width`	The border width of the avatar.	`--afp-border-width-m`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`default-icon` - The default icon when no image or initials are provided.

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/avatar/avatar.js';

Avatar

Examples #

Variants #

Shapes #

Sizes #

Images #

Initials #

Custom Default Icon #

With Tooltip #

Disabled #

Properties

Slots

Internationalization

CSS Parts

CSS Custom Properties

Dependencies

Importing