Appearance

Avatar ​

Avatars are used to help identify individual users on the platform.

Three variants: Main, Light and Image
Main is used on light surfaces
Light is used on dark surfaces
Image can be used on any surface

Avatars do not change size and can be accompanied by the dot badge.

Playground ​

Anatomy ​

  1. Shade container
  2. Badge location (optional)
  3. Name prop container (label)
  4. Border and glow (hover, focus & press)
  5. textColor prop container
  6. Image prop src container

Image avatars ​

Image avatars can be created by passing standard img props src to the component.

vue
<Avatar src="https://picsum.photos/600.webp?random=1" />
<Avatar src="https://picsum.photos/600.webp?random=2" />
<Avatar src="https://picsum.photos/600.webp?random=3" />

TIP

Try to always provide an alternative text via alt property. This allows screen readers to describe the image to visually impaired users.

Initials avatars ​

Avatars can display the name initials by passing the name prop to the component.

EB
YC
H
vue
<Avatar name="Eliza Baxter" />
<Avatar name="Yasin Cordova" />
<Avatar name="Hallie" />

Colorful avatars ​

Avatars can be customized with Leaflink colors, by passing the shade and the color properties to the component.

Light shades (default) ​

EB
YC
H
vue
<Avatar color-scheme="blue"  />
<Avatar color-scheme="red" />
<Avatar color-scheme="seafoam" />

Main shades ​

EB
YC
H
vue
<Avatar shade="main" color-scheme="blue"  />
<Avatar shade="main" color-scheme="red" />
<Avatar shade="main" color-scheme="seafoam" />

Custom color schemes ​

The initial name letters can be customized as well via text-color prop.

EB
YC
H
vue
<Avatar shade="light" color-scheme="blue" text-color="royal-500"  />
<Avatar shade="light" color-scheme="ice" text-color="white" />
<Avatar shade="light" color-scheme="seafoam" text-color="purple-500" />

If none of the default color schemes apply to your use case, you can also provide your own combination of bg-color and text-color props in order to customize the chip.

PW
BI
vue
<Avatar bg-color="purple-500" text-color="white" name="purple white" />
<Avatar bg-color="blue-500" text-color="ice-500" name="blue ice" />

WARNING

When using custom colors, the color and shade props will have no effect.

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.