Avatar

Avatars provide a visual representation of a user to enhance personalization and recognition.

<quiet-avatar label="Anonymous user"></quiet-avatar>

Examples Jump to heading #

Images Jump to heading #

Avatars are best used with images to create a more personalized experience. Set the image attribute to any valid image URL. If the image fails to load, it will show characters or the default image instead.

<quiet-avatar label="Sky kitty" image="https://images.unsplash.com/photo-1574158622682-e40e69881006?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>

Characters Jump to heading #

When an image isn't available or fails to load, you can provide up to five characters to show instead. It's usually best to show no more than three, as the text shrinks to fit.

<quiet-avatar label="Quiet UI" characters="Q"></quiet-avatar>
<quiet-avatar label="Quiet UI" characters="QUI"></quiet-avatar>
<quiet-avatar label="Quiet UI" characters="QUIET"></quiet-avatar>

Custom icons Jump to heading #

When no image or letters are provided as a fallback, the default user icon will be displayed. You can show a custom icon by placing one into the icon slot. Works best with a <quiet-icon> or an <svg> element.

<quiet-avatar label="Anonymous user">
  <quiet-icon slot="icon" name="cat"></quiet-icon>
</quiet-avatar>

<quiet-avatar label="Anonymous user">
  <quiet-icon slot="icon" name="paw"></quiet-icon>
</quiet-avatar>

Changing the size Jump to heading #

You can change the size of an avatar by setting the --size custom property. The aspect ratio is 1:1, so the width and height will always be the same.

<quiet-avatar style="--size: 32px;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="--size: 48px;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="--size: 64px;" label="Anonymous user"></quiet-avatar>

Changing the color Jump to heading #

To change the color of the avatar, use the background-color property and the color property. You can also apply gradients with the background-image property.

<quiet-avatar style="background-color: royalblue; color: white;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="background-color: deeppink; color: white;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="background-color: forestgreen; color: white;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="background-image: linear-gradient(45.8deg, #af68fe 9.3%, #65dfff 75.1%); color: black;" label="Anonymous user"></quiet-avatar>

Changing the shape Jump to heading #

You can change the shape of an avatar by adjusting the border-radius property. More complex shapes can be achieved by removing the default border radius and using clip-path.

<quiet-avatar style="border-radius: 12px;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="border-radius: 2px;" label="Anonymous user"></quiet-avatar>
<quiet-avatar style="border-radius: 0; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);" label="Anonymous user"></quiet-avatar>

Grouping avatars Jump to heading #

You can group avatars with some custom CSS.

<div class="avatar-group">
  <quiet-avatar label="Chill kitty" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
  <quiet-avatar label="Wonder kitty" image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
  <quiet-avatar label="Maine kitty" image="https://images.unsplash.com/photo-1569591159212-b02ea8a9f239?q=80&w=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"></quiet-avatar>
  <quiet-avatar label="+12 more" characters="+12"></quiet-avatar>
</div>

<style>
  .avatar-group quiet-avatar {
    border: solid 2px var(--quiet-background-color);

    &:not(:first-of-type) {
      margin-inline-start: -1.5rem;
    }
  }
</style>

Wrapping with links Jump to heading #

You can wrap links around avatars to make the avatar clickable.

<a href="https://example.com/" target="_blank">
  <quiet-avatar label="Anonymous user"></quiet-avatar>
</a>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/avatar/avatar.js';

import '@quietui/quiet/dist/components/avatar/avatar.js';

Slots Jump to heading #

Avatar supports the following slots. Learn more about using slots

Properties Jump to heading #

Avatar has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

CSS custom properties Jump to heading #

Avatar supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Dependencies Jump to heading #

Avatar automatically imports the following elements. Sub-dependencies are also included in this list.

• <quiet-icon>