Primitives

Avatar

A face, or the initials standing in for one. The name lives on the root rather than the image: with initials there is no <img> to carry an alt, and the letters themselves are decoration — "AB" read aloud is noise. Which is also why initials is optional: the avatar already has the name, so the letters are derived from it, and passing them is for the names where that derivation is wrong.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Code

index.html

<span role="img" aria-label="Ann Lee" class="aura-avatar aura-avatar--sm"><span aria-hidden="true">AL</span></span>
<span role="img" aria-label="Bo Ng" class="aura-avatar"><span aria-hidden="true">BN</span></span>
<span role="img" aria-label="Cy Kim" class="aura-avatar aura-avatar--lg"><span aria-hidden="true">CK</span></span>

Demo.tsx

import { Avatar } from '@ilomee/aura-react';

export default function Demo() {
  // No `initials` here: an avatar already carries the name for the screen reader, so the
  // letters are derived from it. Pass `initials` only where the derivation is wrong.
  return (
    <>
      <Avatar alt="Ann Lee" size="sm" />
      <Avatar alt="Bo Ng" />
      <Avatar alt="Cy Kim" size="lg" />
    </>
  );
}

Demo.vue

<script setup lang="ts">
import { Avatar } from '@ilomee/aura-vue';
</script>

<template>
  <Avatar alt="Ann Lee" />
  <Avatar alt="Cy Kim" size="lg" />
</template>

Demo.svelte

<script lang="ts">
  import { Avatar } from '@ilomee/aura-svelte';
</script>

<Avatar alt="Ann Lee" />
<Avatar alt="Cy Kim" size="lg" />

Used as aura-avatar.

demo.component.ts

import { AuraAvatar } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraAvatar],
  template: `
    <aura-avatar alt="Ann Lee" />
    <aura-avatar alt="Cy Kim" size="lg" />
  `,
})
export class DemoComponent {}

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
src	`string`	—
alt	`string`	—	The accessible name, on the root — and where the initials come from.
initials	`string`	—	Derived from `alt` when omitted. Pass it for a name the derivation gets wrong.
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Name	Type	Default
src	`string`	—
alt	`string`	—
initials	`string`	—
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Name	Type	Default
src	`string`	—
alt	`string`	—
initials	`string`	—
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Name	Type	Default
src	`string`	—
alt	`string`	—
initials	`string`	—
size	`'sm' \| 'md' \| 'lg'`	`'md'`

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-avatar	base	Required. A modifier does nothing without it.
.aura-avatar--sm	modifier
.aura-avatar--lg	modifier

Tokens and rules

components.css

size: var(--avatar-sm|md|lg) — modifiers generated from the tokens
initials: initialsFrom(alt) — first letter of the first and last word