syidaxdesign system
Home Pricing Settings
ComponentsData display

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.
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

  1. image
  2. icon
  3. letter
  4. 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>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-avatar>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseAllow user selection and emit the selected event.
booleanfalseBlock user interaction and keyboard focus.
string''Profile image URL.
string''SVG string displayed in the profile.
string''User name used to derive initials.
string''Explicit initials, up to two characters.
| 'lightgray' | 'red' | 'orange' | 'yellow' | 'lime' | 'green' | 'teal' | 'blue' | 'purple' | 'magenta' | 'darkgray''lightgray'Component display style.
'small' | 'medium' | 'large''medium'Component size.
string''User description shown on hover.

Events

EventDetailDescription
CustomEvent<{ letter: string; text: string; icon: string; image: string; }>Emitted when the user selects an item.
CustomEvent<{ disabled: boolean }>Read the result from the event's detail.

<sy-avatar-group>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseAllow user selection and emit the selected event.
numberInfinity as anyMaximum number of people shown. Remaining people appear in an overflow indicator.
'small' | 'medium' | 'large''medium'Component size.
'stack' | 'grid''stack'stack overlaps items; grid places them side by side.

Events

EventDetailDescription
CustomEvent<{ letter: string; text: string; icon: string; image: string; }>Emitted when the user selects an item.

Slots

SlotDescription
Component body or child items.
Design SystemTab Navigate Enter Open