Components · Data Display

Avatar

Represent a person or entity with a photo, initials, or an icon — solo or in a stacked group.

Examples

Shape

Size

Content

Content · initials · photo · icon

Size · small 24 · default 40 · large 64

Shape · circle · square · color ground

Group · stacked with a +N overflow

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-avatar> is the SAME shared custom element React and Vue consume.
     Content is one of three: `name` (initials + alt), `src` (photo), or `icon` (a DS glyph).
     `size` is a named step (small/default/large) or any px; `shape` is circle/square;
     `color` tints the initials/icon ground with an --aha-* token. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css">
<script type="module">
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/icons.js';       // <aha-icon>
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-avatar.js';  // <aha-avatar> + <aha-avatar-group>
</script>

<aha-avatar name="Ada Lovelace"></aha-avatar>                          <!-- initials -->
<aha-avatar name="Grace Hopper" src="/u/grace.jpg" size="large"></aha-avatar>  <!-- photo, 64 -->
<aha-avatar icon="system-user" name="Guest"></aha-avatar>              <!-- glyph -->
<aha-avatar name="Square One" shape="square" size="small"></aha-avatar> <!-- 24, square -->

<!-- Stacked group: overlaps children, collapses the overflow past `max` into a +N chip -->
<aha-avatar-group max="3">
  <aha-avatar name="Ada Lovelace"></aha-avatar>
  <aha-avatar name="Grace Hopper"></aha-avatar>
  <aha-avatar name="Alan Turing"></aha-avatar>
  <aha-avatar name="Katherine Johnson"></aha-avatar>
</aha-avatar-group>

import '@ahaslides-product/design/aha-avatar';   // registers <aha-avatar> + <aha-avatar-group>

// A plain custom element — no wrapper needed for static props.
// Content is one of three: `name` (initials), `src` (photo), or `icon` (a DS glyph).
function AhaAvatar({ name, src, icon, size = 'default', shape = 'circle', color }) {
  return <aha-avatar name={name} src={src} icon={icon} size={size} shape={shape} color={color} />;
}

// usage
<AhaAvatar name="Ada Lovelace" />
<AhaAvatar name="Grace Hopper" src="/u/grace.jpg" size="large" />
<AhaAvatar icon="system-user" name="Guest" />

// Stacked group with a +N overflow past `max`
<aha-avatar-group max={3}>
  <aha-avatar name="Ada Lovelace" />
  <aha-avatar name="Grace Hopper" />
  <aha-avatar name="Alan Turing" />
  <aha-avatar name="Katherine Johnson" />
</aha-avatar-group>

// main.ts — register the elements + mark aha-* as custom elements
import '@ahaslides-product/design/aha-avatar';   // <aha-avatar> + <aha-avatar-group>
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');

// Component.vue
<template>
  <aha-avatar name="Ada Lovelace" />                             <!-- initials -->
  <aha-avatar name="Grace Hopper" :size="'large'" />            <!-- 64 -->
  <aha-avatar :src="photoUrl" name="Ada Lovelace" />           <!-- photo -->
  <aha-avatar icon="system-user" name="Guest" />              <!-- glyph -->

  <!-- Stacked group with a +N overflow past `max` -->
  <aha-avatar-group max="3">
    <aha-avatar name="Ada Lovelace" />
    <aha-avatar name="Grace Hopper" />
    <aha-avatar name="Alan Turing" />
    <aha-avatar name="Katherine Johnson" />
  </aha-avatar-group>
</template>

API

Prop	Type	Default	Notes
`name`	string	`—`	Full name; initials are derived when no src/icon. Also the alt/aria-label
`src`	string	`—`	Image URL; the photo content mode (overrides icon/initials)
`icon`	string	`—`	DS icon name (e.g. 'system-user'); the glyph content mode when no src
`size`	'small' \| 'default' \| 'large' \| number	`default`	24 / 40 / 64 named steps, or any numeric px
`shape`	circle \| square	`circle`	Clip shape
`color`	token name	`—`	Ground tint — an --aha-* token suffix, e.g. 'bg-positive'
`max`	number	`—`	(aha-avatar-group) collapse children past this count into a +N chip

Install

# .npmrc — once: point the @ahaslides-product scope at GitHub Packages
@ahaslides-product:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages

npm i @ahaslides-product/design
import '@ahaslides-product/design/tokens.css';   // once, at the app root
import '@ahaslides-product/design/aha-avatar';   // registers <aha-avatar>

Agent feed for this component (absolute, fetchable anywhere): avatar.agent.json · avatar.md · avatar.llms.txt

When to use

Avatar — identifying a person or entity — a presenter, a participant, an author
Icon — a generic symbol, not a specific identity
Tag — labelling with a category rather than an identity

Always provide `name` even when `src` is set — it becomes the alt text and the initials fallback if the image fails. Prefer initials or a photo over a generic icon for a real identity; reserve the icon mode for a placeholder/guest slot. In a group, keep sizes uniform and set `max` so the +N chip stays legible.

Surfaces

editor dashboard settings audience

Spec

Size small 24 · default 40 · large 64 (named), or any numeric px via `size` · Shape circle (pill radius) · square (radius 8) · Initials bg-accent #F9F5FF, purple-60 #6A1EBB, SemiBold 600 · Image object-fit cover, clipped to shape · Icon <aha-icon> glyph by name, ~half the avatar diameter, currentColor · Color ground tint from an --aha-* token via `color` (default brand tint) · Group stacked overlap (-10px), 2px container-white ring, +N chip past `max`