Avatar

Square initials- or image-based identity tile.

A compact square tile (zero radius — house rule) representing a person or entity. Pass a `src` to render an image; it falls back to initials if the image fails to load. Initials are the first letters of up to the first two words of `name`, uppercased, on a deterministic colour derived from a hash of the name — the same name always reads the same. The tile carries `role="img"` + `aria-label={name}` so the name is exposed once to assistive tech.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Avatar } from 'dssoca';
</script>

<Avatar name="Ada Lovelace" />
<Avatar name="Ada Lovelace" src="/avatars/ada.png" />
<Avatar name="Grace Hopper" size="lg" />

Always a square (never a circle). The visual initials are aria-hidden; the root tile carries role="img" + aria-label so the name is announced exactly once. Colour comes from CHART_PALETTE — [accent, blue, magenta, cyan, yellow, green], shared with the chart family — via a stable string hash.

Props

Prop	Type	Default	Description
`name`	`string`	—	Required. Drives the initials, the deterministic colour, and the accessible name.
`src`	`string`	—	Optional image URL; rendered as an <img> that falls back to initials on load error.
`alt`	`string`	`name`	Image alt text; defaults to `name`.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.