Components · Data Display

User info

A person/identity row — an avatar next to a name, with an optional email underneath.

Examples

Size

Default · avatar + name + email (40px avatar)

Compact · name only (24px avatar) — no email, or size="compact"

<!-- Paste-and-run: save as .html and open in a browser. No build step.
     <aha-user-info> is the SAME shared custom element React and Vue consume — here in its native
     form. It REUSES the shared <aha-avatar> for the picture/initials. Theming comes only from the
     --aha-* tokens in tokens.css. `name` is required; `email` is optional (omit → compact,
     name-only, 24px avatar); `src` sets the avatar photo; `size` is 'default' | 'compact'. -->
<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> (avatar glyph fallback)
  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-user-info.js';  // registers <aha-user-info> (+ <aha-avatar>)
</script>

<div style="display:flex; flex-direction:column; gap:16px; align-items:flex-start">
  <!-- Default: avatar + name + email (40px avatar) -->
  <aha-user-info name="Brian Le" email="brian@ahaslides.com"></aha-user-info>

  <!-- With a photo -->
  <aha-user-info name="Grace Hopper" email="grace@ahaslides.com" src="https://i.pravatar.cc/80?img=5"></aha-user-info>

  <!-- Compact / name-only (24px avatar) — omit email, or set size="compact" -->
  <aha-user-info name="Ada Lovelace"></aha-user-info>
</div>

import '@ahaslides-product/design/aha-user-info';   // registers <aha-user-info> (+ <aha-avatar>)

// A plain custom element — no wrapper needed for static props. It reuses the shared <aha-avatar>
// internally, so you never hand-roll an avatar beside a name. Omit `email` (or size="compact")
// for the tight, name-only row.
function AhaUserInfo({ name, email, src, size = 'default' }) {
  return <aha-user-info name={name} email={email} src={src} size={size} />;
}

// usage
<AhaUserInfo name="Brian Le" email="brian@ahaslides.com" />
<AhaUserInfo name="Grace Hopper" email="grace@ahaslides.com" src="/u/grace.jpg" />
<AhaUserInfo name="Ada Lovelace" />                          {/* compact / name-only */}

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

// Component.vue
<template>
  <!-- Default: avatar + name + email -->
  <aha-user-info name="Brian Le" email="brian@ahaslides.com" />

  <!-- With a photo -->
  <aha-user-info name="Grace Hopper" email="grace@ahaslides.com" :src="photoUrl" />

  <!-- Compact / name-only — omit email, or set size="compact" -->
  <aha-user-info name="Ada Lovelace" />
</template>

API

Prop	Type	Default	Notes
`name`	string	`—`	The person's full name — rendered as text, and passed to the avatar for initials/alt
`email`	string	`—`	Optional email; when present (and not compact) it renders under the name in the default layout
`src`	string	`—`	Avatar image URL; falls through to initials of `name` when absent
`size`	'default' \| 'compact'	`default`	'default' → 40px avatar + email row; 'compact' → 24px avatar + name only. Omitting `email` implies compact

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-user-info';   // registers <aha-user-info>

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

When to use

User info — showing a person's identity as a row — avatar + name (+ email): a member list, an author byline, an account switcher
Avatar — just the picture/initials with no name text beside it
Descriptions — a labelled field grid about an entity, not a compact identity row

Always provide `name` — it's both the visible label and the avatar's initials/alt. Reach for User info over a plain Avatar whenever the name (and email) belong next to the face; reach for the bare Avatar when only the picture is wanted. Omit `email` (or set size="compact") for a tight one-line identity in menus and dense lists.

Surfaces

dashboard settings editor audience

Spec

Layout avatar + (name over email) · gap 8 · Name 14px · SemiBold 600 · text-default #1A1A1A · Email 12px · Regular 400 · text-secondary #8A8A8A · Avatar 40 when email shown · 24 name-only (reuses <aha-avatar>) · Compact size="compact" (or no email) → 24px avatar + name only