Avatar

Represent people or teams with images, icons, or initials.

<sy-avatar>Installation guide Basic usage

Live preview

Interact with the component to see results here.

User nameColorSize

Allow selectionDisabled

View code

HTML

<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
></sy-avatar>

Usage guide

Help users quickly identify people or organizations alongside their names. The available representation with the highest priority is shown.

Display priority

image
icon
letter
Initials in text

When no image is available: Also provide a name so initials can be displayed.
Navigate to a profile: With clickable, handle navigation in your app through the selected event.
Multiple users: Users beyond the group's maxCount appear in an overflow area. Choose stack or grid layout.

Examples

Size

Three sizes are available to suit the context.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    size="small"
  ></sy-avatar>
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    size="medium"
  ></sy-avatar>
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    size="large"
  ></sy-avatar>
</div>

Profile image

Set image to an image URL. Include the name as well.

View code

HTML

<sy-avatar
  text="Alex Kim"
  variant="purple"
  image="/assets/examples/avatar.svg"
></sy-avatar>

Initials and colors

Distinguish teams or users, but do not rely on color alone to convey meaning.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-avatar text="Alex Kim" variant="purple"></sy-avatar>
  <sy-avatar text="Alex Kim" variant="blue"></sy-avatar>
  <sy-avatar text="Alex Kim" variant="teal"></sy-avatar>
  <sy-avatar text="Alex Kim" variant="orange"></sy-avatar>
</div>

Selection and disabled state

Clickable avatars can also be selected with the keyboard.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    clickable
  ></sy-avatar>
  <sy-avatar
    text="Alex Kim"
    variant="purple"
    clickable
    disabled
  ></sy-avatar>
</div>

Groups and overflow

Show up to three people and access the rest through the overflow indicator.

View code

HTML

<sy-avatar-group maxcount="3" clickable>
  <sy-avatar text="Alex Kim" variant="purple"></sy-avatar>
  <sy-avatar text="Jin Park" variant="blue"></sy-avatar>
  <sy-avatar text="Min Lee" variant="teal"></sy-avatar>
  <sy-avatar text="Sam Cho" variant="orange"></sy-avatar>
  <sy-avatar text="Yun Han" variant="magenta"></sy-avatar>
</sy-avatar-group>

Grid layout

Arrange items in a list without overlapping.

View code

HTML

<sy-avatar-group variant="grid">
  <sy-avatar text="Alex Kim" variant="purple"></sy-avatar>
  <sy-avatar text="Jin Park" variant="blue"></sy-avatar>
  <sy-avatar text="Min Lee" variant="teal"></sy-avatar>
  <sy-avatar text="Sam Cho" variant="orange"></sy-avatar>
  <sy-avatar text="Yun Han" variant="magenta"></sy-avatar>
</sy-avatar-group>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
></sy-avatar>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["selected", "disableStatus"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Avatar description

Set tooltipContent to a full name or role. Hover over the avatar to see it.

View code

HTML

<sy-avatar
  text="Alex Kim"
  variant="purple"
  size="medium"
  tooltipcontent="Alex Kim · Product designer"
  id="supplement-1"
></sy-avatar>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "tooltipContent": "Alex Kim · Product designer"
  });
</script>

Feature examples

Choose a feature from 18 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Group Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.